Skip to content

Commit b3fb31c

Browse files
YuKongAYuKongA
committed
library: TextField: Add borderColor & cursorBrush param
1 parent b83ba45 commit b3fb31c

File tree

3 files changed

+20
-7
lines changed

3 files changed

+20
-7
lines changed

‎docs/components/textfield.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,7 @@ TextField(
9292
| cornerRadius | Dp | Corner radius | 16.dp | No |
9393
| label | String | Label text | "" | No |
9494
| labelColor | Color | Label text color | MiuixTheme.colorScheme.onSecondaryContainer | No |
95+
| borderColor | Color | Border color when focused | MiuixTheme.colorScheme.primary | No |
9596
| useLabelAsPlaceholder | Boolean | Use label as placeholder | false | No |
9697
| enabled | Boolean | Whether input field is enabled | true | No |
9798
| readOnly | Boolean | Whether input field is read-only | false | No |
@@ -106,6 +107,7 @@ TextField(
106107
| visualTransformation | VisualTransformation | Visual transformation | VisualTransformation.None | No |
107108
| onTextLayout | (TextLayoutResult) -> Unit | Text layout callback | {} | No |
108109
| interactionSource | MutableInteractionSource? | Interaction source | null | No |
110+
| cursorBrush | Brush | Cursor brush | SolidColor(MiuixTheme.colorScheme.primary) | No |
109111

110112
## Advanced Usage
111113

‎docs/zh_CN/components/textfield.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,7 @@ TextField(
9292
| cornerRadius | Dp | 输入框圆角半径 | 16.dp | 否 |
9393
| label | String | 输入框标签文本 | "" | 否 |
9494
| labelColor | Color | 标签文本颜色 | MiuixTheme.colorScheme.onSecondaryContainer | 否 |
95+
| borderColor | Color | 输入框聚焦时的边框颜色 | MiuixTheme.colorScheme.primary | 否 |
9596
| useLabelAsPlaceholder | Boolean | 是否使用标签作为占位符 | false | 否 |
9697
| enabled | Boolean | 输入框是否可用 | true | 否 |
9798
| readOnly | Boolean | 输入框是否只读 | false | 否 |
@@ -106,6 +107,7 @@ TextField(
106107
| visualTransformation | VisualTransformation | 视觉转换器 | VisualTransformation.None | 否 |
107108
| onTextLayout | (TextLayoutResult) -> Unit | 文本布局变化回调 | {} | 否 |
108109
| interactionSource | MutableInteractionSource? | 交互源 | null | 否 |
110+
| cursorBrush | Brush | 光标画刷 | SolidColor(MiuixTheme.colorScheme.primary) | 否 |
109111

110112
## 进阶用法
111113

‎miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/TextField.kt‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import androidx.compose.runtime.getValue
2424
import androidx.compose.runtime.remember
2525
import androidx.compose.ui.Alignment
2626
import androidx.compose.ui.Modifier
27+
import androidx.compose.ui.graphics.Brush
2728
import androidx.compose.ui.graphics.Color
2829
import androidx.compose.ui.graphics.SolidColor
2930
import androidx.compose.ui.text.TextLayoutResult
@@ -51,6 +52,7 @@ import top.yukonga.miuix.kmp.utils.SmoothRoundedCornerShape
5152
* @param cornerRadius The corner radius of the [TextField].
5253
* @param label The label to be displayed when the [TextField] is empty.
5354
* @param labelColor The color of the label.
55+
* @param borderColor The color of the border when the [TextField] is focused.
5456
* @param useLabelAsPlaceholder Whether to use the label as a placeholder.
5557
* @param enabled Whether the [TextField] is enabled.
5658
* @param readOnly Whether the [TextField] is read-only.
@@ -66,6 +68,7 @@ import top.yukonga.miuix.kmp.utils.SmoothRoundedCornerShape
6668
* @param visualTransformation The visual transformation to be applied to the [TextField].
6769
* @param onTextLayout The callback to be called when the text layout changes.
6870
* @param interactionSource The interaction source to be applied to the [TextField].
71+
* @param cursorBrush The brush to be used for the cursor.
6972
*/
7073
@Composable
7174
fun TextField(
@@ -74,9 +77,10 @@ fun TextField(
7477
modifier: Modifier = Modifier,
7578
insideMargin: DpSize = DpSize(16.dp, 16.dp),
7679
backgroundColor: Color = MiuixTheme.colorScheme.secondaryContainer,
77-
cornerRadius: Dp = 18.dp,
80+
cornerRadius: Dp = 16.dp,
7881
label: String = "",
7982
labelColor: Color = MiuixTheme.colorScheme.onSecondaryContainer,
83+
borderColor: Color = MiuixTheme.colorScheme.primary,
8084
useLabelAsPlaceholder: Boolean = false,
8185
enabled: Boolean = true,
8286
readOnly: Boolean = false,
@@ -90,7 +94,8 @@ fun TextField(
9094
minLines: Int = 1,
9195
visualTransformation: VisualTransformation = VisualTransformation.None,
9296
onTextLayout: (TextLayoutResult) -> Unit = {},
93-
interactionSource: MutableInteractionSource? = null
97+
interactionSource: MutableInteractionSource? = null,
98+
cursorBrush: Brush = SolidColor(MiuixTheme.colorScheme.primary)
9499
) {
95100
@Suppress("NAME_SHADOWING")
96101
val interactionSource = interactionSource ?: remember { MutableInteractionSource() }
@@ -102,7 +107,7 @@ fun TextField(
102107
}
103108
val isFocused by interactionSource.collectIsFocusedAsState()
104109
val borderWidth by animateDpAsState(if (isFocused) 2.dp else 0.dp)
105-
val borderColor by animateColorAsState(if (isFocused) MiuixTheme.colorScheme.primary else backgroundColor)
110+
val borderColor by animateColorAsState(if (isFocused) borderColor else backgroundColor)
106111
val labelOffsetY by animateDpAsState(if (value.text.isNotEmpty() && !useLabelAsPlaceholder) -(insideMargin.height / 2) else 0.dp)
107112
val innerTextOffsetY by animateDpAsState(if (value.text.isNotEmpty() && !useLabelAsPlaceholder) (insideMargin.height / 2) else 0.dp)
108113
val labelFontSize by animateDpAsState(if (value.text.isNotEmpty() && !useLabelAsPlaceholder) 10.dp else 17.dp)
@@ -125,7 +130,7 @@ fun TextField(
125130
visualTransformation = visualTransformation,
126131
onTextLayout = onTextLayout,
127132
interactionSource = interactionSource,
128-
cursorBrush = SolidColor(MiuixTheme.colorScheme.primary),
133+
cursorBrush = cursorBrush,
129134
decorationBox =
130135
@Composable { innerTextField ->
131136
val shape = remember { derivedStateOf { SmoothRoundedCornerShape(cornerRadius) } }
@@ -196,6 +201,7 @@ fun TextField(
196201
* @param cornerRadius The corner radius of the [TextField].
197202
* @param label The label to be displayed when the [TextField] is empty.
198203
* @param labelColor The color of the label.
204+
* @param borderColor The color of the border when the [TextField] is focused.
199205
* @param useLabelAsPlaceholder Whether to use the label as a placeholder.
200206
* @param enabled Whether the [TextField] is enabled.
201207
* @param readOnly Whether the [TextField] is read-only.
@@ -211,6 +217,7 @@ fun TextField(
211217
* @param visualTransformation The visual transformation to be applied to the [TextField].
212218
* @param onTextLayout The callback to be called when the text layout changes.
213219
* @param interactionSource The interaction source to be applied to the [TextField].
220+
* @param cursorBrush The brush to be used for the cursor.
214221
*/
215222
@Composable
216223
fun TextField(
@@ -222,6 +229,7 @@ fun TextField(
222229
cornerRadius: Dp = 16.dp,
223230
label: String = "",
224231
labelColor: Color = MiuixTheme.colorScheme.onSecondaryContainer,
232+
borderColor: Color = MiuixTheme.colorScheme.primary,
225233
useLabelAsPlaceholder: Boolean = false,
226234
enabled: Boolean = true,
227235
readOnly: Boolean = false,
@@ -235,7 +243,8 @@ fun TextField(
235243
minLines: Int = 1,
236244
visualTransformation: VisualTransformation = VisualTransformation.None,
237245
onTextLayout: (TextLayoutResult) -> Unit = {},
238-
interactionSource: MutableInteractionSource? = null
246+
interactionSource: MutableInteractionSource? = null,
247+
cursorBrush: Brush = SolidColor(MiuixTheme.colorScheme.primary)
239248
) {
240249
@Suppress("NAME_SHADOWING")
241250
val interactionSource = interactionSource ?: remember { MutableInteractionSource() }
@@ -247,7 +256,7 @@ fun TextField(
247256
}
248257
val isFocused by interactionSource.collectIsFocusedAsState()
249258
val borderWidth by animateDpAsState(if (isFocused) 2.0.dp else 0.dp)
250-
val borderColor by animateColorAsState(if (isFocused) MiuixTheme.colorScheme.primary else backgroundColor)
259+
val borderColor by animateColorAsState(if (isFocused) borderColor else backgroundColor)
251260
val labelOffsetY by animateDpAsState(if (value.isNotEmpty() && !useLabelAsPlaceholder) -(insideMargin.height / 2) else 0.dp)
252261
val innerTextOffsetY by animateDpAsState(if (value.isNotEmpty() && !useLabelAsPlaceholder) (insideMargin.height / 2) else 0.dp)
253262
val labelFontSize by animateDpAsState(if (value.isNotEmpty() && !useLabelAsPlaceholder) 10.dp else 17.dp)
@@ -270,7 +279,7 @@ fun TextField(
270279
visualTransformation = visualTransformation,
271280
onTextLayout = onTextLayout,
272281
interactionSource = interactionSource,
273-
cursorBrush = SolidColor(MiuixTheme.colorScheme.primary),
282+
cursorBrush = cursorBrush,
274283
decorationBox =
275284
@Composable { innerTextField ->
276285
Box(

0 commit comments

Comments
 (0)