Skip to content

Commit 8e80873

Browse files
YuKongAYuKongA
committed
WIP 6
1 parent 4b3dd41 commit 8e80873

File tree

7 files changed

+337
-5
lines changed

7 files changed

+337
-5
lines changed

‎docs/.vitepress/config.mts‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,45 @@ export default defineConfig({
44
title: "Miuix",
55
description: "A UI library for Compose MultiPlatform",
66
lastUpdated: true,
7+
lang: 'zh-Hans',
78
themeConfig: {
89
logo: '/Icon.webp',
910

11+
docFooter: {
12+
prev: '上一页',
13+
next: '下一页'
14+
},
15+
16+
outline: {
17+
label: '页面导航'
18+
},
19+
20+
lastUpdated: {
21+
text: '最后更新于',
22+
formatOptions: {
23+
dateStyle: 'short',
24+
timeStyle: 'medium'
25+
}
26+
},
27+
28+
langMenuLabel: '多语言',
29+
returnToTopLabel: '回到顶部',
30+
sidebarMenuLabel: '菜单',
31+
darkModeSwitchLabel: '主题',
32+
lightModeSwitchTitle: '切换到浅色模式',
33+
darkModeSwitchTitle: '切换到深色模式',
34+
skipToContentLabel: '跳转到内容',
35+
36+
editLink: {
37+
pattern: 'https://github.com/miuix-kotlin-multiplatform/miuix/edit/main/docs/:path',
38+
text: '在 GitHub 上编辑此页面'
39+
},
40+
41+
footer: {
42+
message: '基于 Apache-2.0 许可发布',
43+
copyright: `版权所有 © 2024-${new Date().getFullYear()} miuix-kotlin-multiplatform`
44+
},
45+
1046
nav: [
1147
{ text: '首页', link: '/' },
1248
{ text: '快速开始', link: '/guide/getting-started' },

‎docs/components/basiccomponent.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# BasicComponent
22

3-
`BasicComponent` 是 Miuix 中的标准基础组件，广泛用于其他扩展组件。提供了标题、摘要以及左右两侧的可自定义内容区域，常用于构建列表项、设置项等界面元素。本项目以此为基础提供了一些扩展组件，方便开发者快速构建符合设计规范的 UI 组件。
3+
`BasicComponent` 是 Miuix 中的基础标准组件，广泛用于其他扩展组件。提供了标题、摘要以及左右两侧的可自定义内容区域，常用于构建列表项、设置项等界面元素。本项目以此为基础提供了一些扩展组件，方便开发者快速构建符合设计规范的 UI 组件。
44

55
## 引入
66

‎docs/components/button.md‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Button
22

3-
`Button` 是 Miuix 中的交互基础组件，用于触发操作或事件。提供了多种风格选择，包括主要按钮、次要按钮和文本按钮。
3+
`Button` 是 Miuix 中的基础交互组件，用于触发操作或事件。提供了多种风格选择，包括主要按钮、次要按钮和文本按钮。
44

55
## 引入
66

@@ -154,7 +154,6 @@ Button(
154154
```kotlin
155155
var isLoading by remember { mutableStateOf(false) }
156156
val scope = rememberCoroutineScope()
157-
158157
Button(
159158
onClick = {
160159
isLoading = true

‎docs/components/smalltitle.md‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
# SmallTitle
2+
3+
`SmallTitle` 是 Miuix 中的基础小标题组件，用于快速创建小型标题文本。采用 Miuix 的设计风格，具有预设的字体大小、字重和内边距。
4+
5+
## 引入
6+
7+
```kotlin
8+
import top.yukonga.miuix.kmp.basic.SmallTitle
9+
```
10+
11+
## 基本用法
12+
13+
SmallTitle 组件可以用于展示小型标题文本：
14+
15+
```kotlin
16+
SmallTitle(
17+
text = "小标题"
18+
)
19+
```
20+
21+
## 自定义外观
22+
23+
### 自定义颜色
24+
25+
```kotlin
26+
SmallTitle(
27+
text = "自定义颜色的小标题",
28+
textColor = Color.Red
29+
)
30+
```
31+
32+
### 自定义内边距
33+
34+
```kotlin
35+
SmallTitle(
36+
text = "自定义内边距的小标题",
37+
insideMargin = PaddingValues(16.dp, 4.dp)
38+
)
39+
```
40+
41+
## 属性
42+
43+
### SmallTitle 属性
44+
45+
| 属性名 | 类型 | 默认值 | 说明 |
46+
| ------------ | ------------- | ------------------------------------------ | ------------------ |
47+
| text | String | - | 要显示的文本内容 |
48+
| modifier | Modifier | Modifier | 应用于组件的修饰符 |
49+
| textColor | Color | MiuixTheme.colorScheme.onBackgroundVariant | 标题文本颜色 |
50+
| insideMargin | PaddingValues | PaddingValues(28.dp, 8.dp) | 组件内部边距 |
51+
52+
## 进阶用法
53+
54+
### 与其他组件组合使用
55+
56+
```kotlin
57+
Column {
58+
SmallTitle(text = "设置")
59+
Card(
60+
modifier = Modifier.padding(horizontal = 12.dp).padding(bottom = 12.dp)
61+
) {
62+
var checked by remember { mutableStateOf(false) }
63+
SuperSwitch(
64+
title = "蓝牙",
65+
checked = checked,
66+
onCheckedChange = { checked = it }
67+
)
68+
}
69+
HorizontalDivider(
70+
modifier = Modifier.padding(horizontal = 12.dp)
71+
)
72+
SmallTitle(text = "高级设置")
73+
// 其他设置项
74+
}
75+
```
76+
77+
### 自定义样式
78+
79+
```kotlin
80+
SmallTitle(
81+
text = "完全自定义样式",
82+
modifier = Modifier
83+
.fillMaxWidth()
84+
.background(Color.LightGray),
85+
textColor = Color.Blue,
86+
insideMargin = PaddingValues(32.dp, 12.dp)
87+
)
88+
```

‎docs/components/surface.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Surface
22

3-
`Surface` 是 Miuix 中的容器基础组件，用于为应用内容提供一致的背景和边框效果，为界面元素提供统一的视觉基础。支持一些简单的自定义样式。
3+
`Surface` 是 Miuix 中的基础容器组件，用于为应用内容提供一致的背景和边框效果，为界面元素提供统一的视觉基础。支持一些简单的自定义样式。
44

55
## 引入
66

‎docs/components/text.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Text
22

3-
`Text` 组件是 Miuix 中的文本基础组件，用于显示文字内容。支持自定义各种文本样式、对齐方式和装饰效果。
3+
`Text` 组件是 Miuix 中的基础文本组件，用于显示文字内容。支持自定义各种文本样式、对齐方式和装饰效果。
44

55
## 引入
66

‎docs/components/textfield.md‎

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
# TextField
2+
3+
`TextField` 是 Miuix 中的基础输入组件，用于接收用户的文本输入。组件提供了丰富的自定义选项，支持标签动画、前置和后置图标等功能。
4+
5+
## 引入
6+
7+
```kotlin
8+
import top.yukonga.miuix.kmp.basic.TextField
9+
```
10+
11+
## 基本用法
12+
13+
TextField 组件可以用于获取用户输入：
14+
15+
```kotlin
16+
var text by remember { mutableStateOf("") }
17+
TextField(
18+
value = text,
19+
onValueChange = { text = it },
20+
label = "用户名"
21+
)
22+
```
23+
24+
## 输入框类型
25+
26+
### 带标签输入框
27+
28+
标签会在输入框获得焦点或有内容时自动移动到顶部：
29+
30+
```kotlin
31+
var text by remember { mutableStateOf("") }
32+
TextField(
33+
value = text,
34+
onValueChange = { text = it },
35+
label = "邮箱地址"
36+
)
37+
```
38+
39+
### 使用标签作为占位符
40+
41+
```kotlin
42+
var text by remember { mutableStateOf("") }
43+
TextField(
44+
value = text,
45+
onValueChange = { text = it },
46+
label = "请输入内容",
47+
useLabelAsPlaceholder = true
48+
)
49+
```
50+
51+
### 禁用状态
52+
53+
```kotlin
54+
var text by remember { mutableStateOf("") }
55+
TextField(
56+
value = text,
57+
onValueChange = { text = it },
58+
label = "禁用输入框",
59+
enabled = false
60+
)
61+
```
62+
63+
### 只读状态
64+
65+
```kotlin
66+
var text by remember { mutableStateOf("这是只读内容") }
67+
TextField(
68+
value = text,
69+
onValueChange = { text = it },
70+
label = "只读输入框",
71+
readOnly = true
72+
)
73+
```
74+
75+
## 属性
76+
77+
### TextField 属性
78+
79+
| 属性名 | 类型 | 默认值 | 说明 |
80+
| --------------------- | -------------------------------------------- | ---------------------------------------------------- | ---------------------- |
81+
| value | String 或 TextFieldValue | - | 输入框的文本值 |
82+
| onValueChange | (String) -> Unit 或 (TextFieldValue) -> Unit | - | 文本变化时的回调函数 |
83+
| modifier | Modifier | Modifier | 应用于输入框的修饰符 |
84+
| insideMargin | DpSize | DpSize(16.dp, 16.dp) | 输入框内部边距 |
85+
| backgroundColor | Color | MiuixTheme.colorScheme.secondaryContainer | 输入框背景颜色 |
86+
| cornerRadius | Dp | 16.dp | 输入框圆角半径 |
87+
| label | String | "" | 输入框标签文本 |
88+
| labelColor | Color | MiuixTheme.colorScheme.onSecondaryContainer | 标签文本颜色 |
89+
| useLabelAsPlaceholder | Boolean | false | 是否使用标签作为占位符 |
90+
| enabled | Boolean | true | 输入框是否可用 |
91+
| readOnly | Boolean | false | 输入框是否只读 |
92+
| textStyle | TextStyle | MiuixTheme.textStyles.main | 输入文本样式 |
93+
| keyboardOptions | KeyboardOptions | KeyboardOptions.Default | 键盘选项配置 |
94+
| keyboardActions | KeyboardActions | KeyboardActions.Default | 键盘操作配置 |
95+
| leadingIcon | @Composable (() -> Unit)? | null | 前置图标 |
96+
| trailingIcon | @Composable (() -> Unit)? | null | 后置图标 |
97+
| singleLine | Boolean | false | 是否为单行输入 |
98+
| maxLines | Int | 如果 singleLine 为 true 则为 1，否则为 Int.MAX_VALUE | 最大行数 |
99+
| minLines | Int | 1 | 最小行数 |
100+
| visualTransformation | VisualTransformation | VisualTransformation.None | 视觉转换器 |
101+
| onTextLayout | (TextLayoutResult) -> Unit | {} | 文本布局变化回调 |
102+
| interactionSource | MutableInteractionSource? | null | 交互源 |
103+
104+
## 进阶用法
105+
106+
### 带图标输入框
107+
108+
```kotlin
109+
var text by remember { mutableStateOf("") }
110+
TextField(
111+
value = text,
112+
onValueChange = { text = it },
113+
label = "搜索",
114+
leadingIcon = {
115+
Icon(
116+
imageVector = MiuixIcons.Useful.Search,
117+
contentDescription = "搜索图标",
118+
modifier = Modifier.padding(horizontal = 12.dp)
119+
)
120+
}
121+
)
122+
```
123+
124+
### 密码输入框
125+
126+
```kotlin
127+
var password by remember { mutableStateOf("") }
128+
var passwordVisible by remember { mutableStateOf(false) }
129+
TextField(
130+
value = password,
131+
onValueChange = { password = it },
132+
label = "密码",
133+
visualTransformation = if (passwordVisible) VisualTransformation.None else PasswordVisualTransformation(),
134+
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
135+
trailingIcon = {
136+
IconButton(
137+
onClick = { passwordVisible = !passwordVisible },
138+
modifier = Modifier.padding(end = 12.dp)
139+
) {
140+
Icon(
141+
imageVector = MiuixIcons.Useful.Rename,
142+
tint = if (passwordVisible) MiuixTheme.colorScheme.primary else MiuixTheme.colorScheme.onSecondaryContainer,
143+
contentDescription = if (passwordVisible) "隐藏密码" else "显示密码"
144+
)
145+
}
146+
}
147+
)
148+
```
149+
150+
### 带验证的输入框
151+
152+
```kotlin
153+
var email by remember { mutableStateOf("") }
154+
var isError by remember { mutableStateOf(false) }
155+
var errorColor = Color.Red.copy(0.3f)
156+
val emailPattern = remember { Regex("[a-zA-Z0-9._-]+@[a-z]+\\.+[a-z]+") }
157+
Column {
158+
TextField(
159+
value = email,
160+
onValueChange = {
161+
email = it
162+
isError = email.isNotEmpty() && !emailPattern.matches(email)
163+
},
164+
label = "电子邮箱",
165+
labelColor = if (isError) errorColor else MiuixTheme.colorScheme.onSecondaryContainer,
166+
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Email)
167+
)
168+
if (isError) {
169+
Text(
170+
text = "请输入有效的邮箱地址",
171+
color = errorColor,
172+
style = MiuixTheme.textStyles.body2,
173+
modifier = Modifier.padding(start = 16.dp, top = 4.dp)
174+
)
175+
}
176+
}
177+
```
178+
179+
### 自定义样式
180+
181+
```kotlin
182+
var text by remember { mutableStateOf("") }
183+
TextField(
184+
value = text,
185+
onValueChange = { text = it },
186+
label = "自定义输入框",
187+
cornerRadius = 8.dp,
188+
backgroundColor = MiuixTheme.colorScheme.primary.copy(alpha = 0.1f),
189+
textStyle = TextStyle(
190+
fontWeight = FontWeight.Medium,
191+
fontSize = 16.sp,
192+
color = MiuixTheme.colorScheme.primary
193+
)
194+
)
195+
```
196+
197+
### 使用 TextFieldValue
198+
199+
当需要更细致地控制文本选择和光标位置时：
200+
201+
```kotlin
202+
var textFieldValue by remember { mutableStateOf(TextFieldValue("")) }
203+
TextField(
204+
value = textFieldValue,
205+
onValueChange = { textFieldValue = it },
206+
label = "高级输入控制",
207+
// TextFieldValue 提供了对文本、选择范围和光标位置的控制
208+
)
209+
```

0 commit comments

Comments
 (0)