diff --git a/docs/components/searchbar.md b/docs/components/searchbar.md index a12cad29..3699fbcf 100644 --- a/docs/components/searchbar.md +++ b/docs/components/searchbar.md @@ -39,14 +39,15 @@ SearchBar( ### SearchBar Properties -| Property Name | Type | Description | Default Value | Required | -| ------------------ | ---------------------------------- | ------------------------------------------------- | ------------- | -------- | -| inputField | @Composable () -> Unit | Search input field component | - | Yes | -| expanded | Boolean | Whether to show search results | false | Yes | -| onExpandedChange | (Boolean) -> Unit | Callback when expanded state changes | - | Yes | -| modifier | Modifier | Modifier applied to the search bar | Modifier | No | -| outsideRightAction | @Composable (() -> Unit)? | Action component shown on the right when expanded | null | No | -| content | @Composable ColumnScope.() -> Unit | Content shown when expanded | - | Yes | +| Property Name | Type | Description | Default Value | Required | +| ------------------ | ---------------------------------- | ------------------------------------------------- | ------------------- | -------- | +| inputField | @Composable () -> Unit | Search input field component | - | Yes | +| onExpandedChange | (Boolean) -> Unit | Callback when expanded state changes | - | Yes | +| insideMargin | DpSize | Internal padding | DpSize(12.dp, 0.dp) | No | +| modifier | Modifier | Modifier applied to the search bar | Modifier | No | +| expanded | Boolean | Whether to show search results | false | No | +| outsideRightAction | @Composable (() -> Unit)? | Action component shown on the right when expanded | null | No | +| content | @Composable ColumnScope.() -> Unit | Content shown when expanded | - | Yes | ### InputField Properties @@ -54,14 +55,14 @@ SearchBar( | ----------------- | ------------------------- | ------------------------------------ | -------------------- | -------- | | query | String | Text content in search field | - | Yes | | onQueryChange | (String) -> Unit | Callback when text content changes | - | Yes | +| label | String | Placeholder text when empty | "" | No | | onSearch | (String) -> Unit | Callback when search is executed | - | Yes | | expanded | Boolean | Whether in expanded state | - | Yes | | onExpandedChange | (Boolean) -> Unit | Callback when expanded state changes | - | Yes | -| label | String | Placeholder text when empty | "" | No | +| modifier | Modifier | Modifier applied to the input field | Modifier | No | | enabled | Boolean | Whether search field is enabled | true | No | -| insideMargin | DpSize | Internal padding | DpSize(12.dp, 12.dp) | No | -| leadingIcon | @Composable (() -> Unit)? | Leading icon | null | No | -| trailingIcon | @Composable (() -> Unit)? | Trailing icon | null | No | +| leadingIcon | @Composable (() -> Unit)? | Leading icon | default search icon | No | +| trailingIcon | @Composable (() -> Unit)? | Trailing icon | default clear button | No | | interactionSource | MutableInteractionSource? | Interaction source | null | No | ## Advanced Usage diff --git a/docs/zh_CN/components/searchbar.md b/docs/zh_CN/components/searchbar.md index 2e6d790b..927cee88 100644 --- a/docs/zh_CN/components/searchbar.md +++ b/docs/zh_CN/components/searchbar.md @@ -39,30 +39,31 @@ SearchBar( ### SearchBar 属性 -| 属性名 | 类型 | 说明 | 默认值 | 是否必须 | -| ------------------ | ---------------------------------- | -------------------------- | -------- | -------- | -| inputField | @Composable () -> Unit | 搜索输入框组件 | - | 是 | -| expanded | Boolean | 是否展开显示搜索结果 | false | 是 | -| onExpandedChange | (Boolean) -> Unit | 展开状态变化的回调 | - | 是 | -| modifier | Modifier | 应用于搜索栏的修饰符 | Modifier | 否 | -| outsideRightAction | @Composable (() -> Unit)? | 展开时显示在右侧的操作组件 | null | 否 | -| content | @Composable ColumnScope.() -> Unit | 展开时显示的内容 | - | 是 | +| 属性名 | 类型 | 说明 | 默认值 | 是否必须 | +| ------------------ | ---------------------------------- | -------------------------- | ------------------- | -------- | +| inputField | @Composable () -> Unit | 搜索输入框组件 | - | 是 | +| onExpandedChange | (Boolean) -> Unit | 展开状态变化的回调 | - | 是 | +| insideMargin | DpSize | 内部边距 | DpSize(12.dp, 0.dp) | 否 | +| modifier | Modifier | 应用于搜索栏的修饰符 | Modifier | 否 | +| expanded | Boolean | 是否展开显示搜索结果 | false | 否 | +| outsideRightAction | @Composable (() -> Unit)? | 展开时显示在右侧的操作组件 | null | 否 | +| content | @Composable ColumnScope.() -> Unit | 展开时显示的内容 | - | 是 | ### InputField 属性 -| 属性名 | 类型 | 说明 | 默认值 | 是否必须 | -| ----------------- | ------------------------- | -------------------------- | -------------------- | -------- | -| query | String | 搜索框中的文本内容 | - | 是 | -| onQueryChange | (String) -> Unit | 文本内容变化时的回调 | - | 是 | -| onSearch | (String) -> Unit | 执行搜索操作时的回调 | - | 是 | -| expanded | Boolean | 是否处于展开状态 | - | 是 | -| onExpandedChange | (Boolean) -> Unit | 展开状态变化的回调 | - | 是 | -| label | String | 搜索框为空时显示的提示文本 | "" | 否 | -| enabled | Boolean | 是否启用搜索框 | true | 否 | -| insideMargin | DpSize | 内部边距 | DpSize(12.dp, 12.dp) | 否 | -| leadingIcon | @Composable (() -> Unit)? | 前置图标 | null | 否 | -| trailingIcon | @Composable (() -> Unit)? | 后置图标 | null | 否 | -| interactionSource | MutableInteractionSource? | 交互源 | null | 否 | +| 属性名 | 类型 | 说明 | 默认值 | 是否必须 | +| ----------------- | ------------------------- | -------------------------- | ------------ | -------- | +| query | String | 搜索框中的文本内容 | - | 是 | +| onQueryChange | (String) -> Unit | 文本内容变化时的回调 | - | 是 | +| label | String | 搜索框为空时显示的提示文本 | "" | 否 | +| onSearch | (String) -> Unit | 执行搜索操作时的回调 | - | 是 | +| expanded | Boolean | 是否处于展开状态 | - | 是 | +| onExpandedChange | (Boolean) -> Unit | 展开状态变化的回调 | - | 是 | +| modifier | Modifier | 应用于输入框的修饰符 | Modifier | 否 | +| enabled | Boolean | 是否启用搜索框 | true | 否 | +| leadingIcon | @Composable (() -> Unit)? | 前置图标 | 默认放大镜 | 否 | +| trailingIcon | @Composable (() -> Unit)? | 后置图标 | 默认清除按钮 | 否 | +| interactionSource | MutableInteractionSource? | 交互源 | null | 否 | ## 进阶用法 diff --git a/example/src/commonMain/kotlin/MainPage.kt b/example/src/commonMain/kotlin/MainPage.kt index 8edebc4a..20fcb8df 100644 --- a/example/src/commonMain/kotlin/MainPage.kt +++ b/example/src/commonMain/kotlin/MainPage.kt @@ -90,8 +90,6 @@ fun MainPage( item { SmallTitle(text = "SearchBar") SearchBar( - modifier = Modifier - .padding(start = 12.dp, end = 12.dp, bottom = 6.dp), inputField = { InputField( query = miuixSearchValue, @@ -105,7 +103,7 @@ fun MainPage( outsideRightAction = { Text( modifier = Modifier - .padding(start = 12.dp) + .padding(end = 12.dp) .clickable( interactionSource = null, indication = null @@ -161,15 +159,12 @@ fun MainPage( LazyColumn( modifier = Modifier .nestedScroll(topAppBarScrollBehavior.nestedScrollConnection) - .padding(start = 12.dp) .weight(1f), contentPadding = PaddingValues(top = padding.calculateTopPadding()) ) { item { SmallTitle(text = "SearchBar") SearchBar( - modifier = Modifier - .padding(start = 12.dp, end = 12.dp, bottom = 6.dp), inputField = { InputField( query = miuixSearchValue, @@ -183,7 +178,6 @@ fun MainPage( outsideRightAction = { Text( modifier = Modifier - .padding(start = 12.dp) .clickable( interactionSource = null, indication = null diff --git a/example/src/commonMain/kotlin/SecondPage.kt b/example/src/commonMain/kotlin/SecondPage.kt index 47970e8c..b4aad691 100644 --- a/example/src/commonMain/kotlin/SecondPage.kt +++ b/example/src/commonMain/kotlin/SecondPage.kt @@ -57,8 +57,7 @@ fun SecondPage( ) { item { Card( - modifier = Modifier - .padding(12.dp) + modifier = Modifier.padding(12.dp) ) { for (i in 0 until ii.value) { SuperDropdown( diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/SearchBar.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/SearchBar.kt index d8e3ff24..c3f981f6 100644 --- a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/SearchBar.kt +++ b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/SearchBar.kt @@ -1,8 +1,12 @@ package top.yukonga.miuix.kmp.basic import androidx.compose.animation.AnimatedVisibility +import androidx.compose.animation.expandHorizontally import androidx.compose.animation.fadeIn import androidx.compose.animation.fadeOut +import androidx.compose.animation.shrinkHorizontally +import androidx.compose.animation.slideInHorizontally +import androidx.compose.animation.slideOutHorizontally import androidx.compose.foundation.background import androidx.compose.foundation.clickable import androidx.compose.foundation.interaction.Interaction @@ -13,6 +17,7 @@ import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.ColumnScope import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.heightIn import androidx.compose.foundation.layout.padding import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.text.BasicTextField @@ -53,6 +58,7 @@ import top.yukonga.miuix.kmp.utils.SmoothRoundedCornerShape * @param inputField the input field to input a query in the [SearchBar]. * @param onExpandedChange the callback to be invoked when the [SearchBar]'s expanded state is * changed. + * @param insideMargin The margin inside the [SearchBar]. * @param modifier the [Modifier] to be applied to the [SearchBar]. * @param expanded whether the [SearchBar] is expanded and showing search results. * @param outsideRightAction the action to be shown at the right side of the [SearchBar] when it is @@ -63,6 +69,7 @@ import top.yukonga.miuix.kmp.utils.SmoothRoundedCornerShape fun SearchBar( inputField: @Composable () -> Unit, onExpandedChange: (Boolean) -> Unit, + insideMargin: DpSize = DpSize(12.dp, 0.dp), modifier: Modifier = Modifier, expanded: Boolean = false, outsideRightAction: @Composable (() -> Unit)? = null, @@ -76,11 +83,17 @@ fun SearchBar( modifier = Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically, ) { - Box(modifier = Modifier.weight(1f)) { + Box( + modifier = Modifier + .weight(1f) + .padding(vertical = insideMargin.height, horizontal = insideMargin.width) + ) { inputField() } AnimatedVisibility( - visible = expanded + visible = expanded, + enter = expandHorizontally() + slideInHorizontally(initialOffsetX = { it }), + exit = shrinkHorizontally() + slideOutHorizontally(targetOffsetX = { it }) ) { outsideRightAction?.invoke() } @@ -115,7 +128,6 @@ fun SearchBar( * @param enabled the enabled state of this input field. When `false`, this component will not * respond to user input, and it will appear visually disabled and disabled to accessibility * services. - * @param insideMargin the margin inside the [InputField]. * @param leadingIcon the leading icon to be displayed at the start of the input field. * @param trailingIcon the trailing icon to be displayed at the end of the input field. * @param interactionSource an optional hoisted [MutableInteractionSource] for observing and @@ -133,7 +145,6 @@ fun InputField( onExpandedChange: (Boolean) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, - insideMargin: DpSize = DpSize(12.dp, 12.dp), leadingIcon: @Composable (() -> Unit)? = null, trailingIcon: @Composable (() -> Unit)? = null, interactionSource: MutableInteractionSource? = null, @@ -212,7 +223,7 @@ fun InputField( Box( modifier = Modifier .weight(1f) - .padding(vertical = insideMargin.height), + .heightIn(min = 45.dp), contentAlignment = Alignment.CenterStart ) { Text(