Skip to content

Commit 999b9d7

Browse files
YuKongAYuKongA
committed
WIP 7
1 parent 8e80873 commit 999b9d7

File tree

6 files changed

+343
-10
lines changed

6 files changed

+343
-10
lines changed

‎docs/components/basiccomponent.md‎

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

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

57
## 引入
68

@@ -64,6 +66,8 @@ BasicComponent(
6466
)
6567
```
6668

69+
## 组件状态
70+
6771
### 禁用状态
6872

6973
```kotlin

‎docs/components/button.md‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,17 @@ Button(
4646
}
4747
```
4848

49+
### 文本按钮（Text Button）
50+
51+
```kotlin
52+
TextButton(
53+
text = "文本按钮",
54+
onClick = { /* 处理点击事件 */ }
55+
)
56+
```
57+
58+
## 组件状态
59+
4960
### 禁用状态
5061

5162
```kotlin
@@ -57,15 +68,6 @@ Button(
5768
}
5869
```
5970

60-
### 文本按钮（Text Button）
61-
62-
```kotlin
63-
TextButton(
64-
text = "文本按钮",
65-
onClick = { /* 处理点击事件 */ }
66-
)
67-
```
68-
6971
## 属性
7072

7173
### Button 属性

‎docs/components/checkbox.md‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
# CheckBox
2+
3+
`CheckBox` 是 Miuix 中的选择组件，用于在选中与未选中状态间切换。它提供了具有动画效果的交互式选择控件，适用于多选场景和配置项的启用与禁用。
4+
5+
## 引入
6+
7+
```kotlin
8+
import top.yukonga.miuix.kmp.basic.Checkbox
9+
```
10+
11+
## 基本用法
12+
13+
CheckBox 组件可以用于创建可选择的选项：
14+
15+
```kotlin
16+
var checked by remember { mutableStateOf(false) }
17+
Checkbox(
18+
checked = checked,
19+
onCheckedChange = { checked = it }
20+
)
21+
```
22+
23+
## 组件状态
24+
25+
### 禁用状态
26+
27+
```kotlin
28+
var checked by remember { mutableStateOf(false) }
29+
Checkbox(
30+
checked = checked,
31+
onCheckedChange = { checked = it },
32+
enabled = false
33+
)
34+
```
35+
36+
## 属性
37+
38+
### Checkbox 属性
39+
40+
| 属性名 | 类型 | 默认值 | 说明 |
41+
| --------------- | -------------------- | -------------------------------- | ------------------------ |
42+
| checked | Boolean | - | 复选框是否处于选中状态 |
43+
| onCheckedChange | ((Boolean) -> Unit)? | - | 选中状态变化时的回调函数 |
44+
| modifier | Modifier | Modifier | 应用于复选框的修饰符 |
45+
| colors | CheckboxColors | CheckboxDefaults.checkboxColors() | 复选框的颜色配置 |
46+
| enabled | Boolean | true | 复选框是否可交互 |
47+
48+
### CheckboxDefaults 对象
49+
50+
CheckboxDefaults 对象提供了 Checkbox 组件的默认颜色配置。
51+
52+
#### 方法
53+
54+
| 方法名 | 返回类型 | 说明 |
55+
| --------------- | ------------- | ------------------------ |
56+
| checkboxColors() | CheckboxColors | 创建复选框的默认颜色配置 |
57+
58+
### CheckboxColors 类
59+
60+
| 属性名 | 类型 | 说明 |
61+
| ----------------------------- | ----- | ------------------------------ |
62+
| checkedForegroundColor | Color | 选中状态时前景色（对勾颜色） |
63+
| uncheckedForegroundColor | Color | 未选中状态时前景色 |
64+
| disabledCheckedForegroundColor| Color | 禁用且选中状态时前景色 |
65+
| disabledUncheckedForegroundColor| Color | 禁用且未选中状态时前景色 |
66+
| checkedBackgroundColor | Color | 选中状态时背景色 |
67+
| uncheckedBackgroundColor | Color | 未选中状态时背景色 |
68+
| disabledCheckedBackgroundColor| Color | 禁用且选中状态时背景色 |
69+
| disabledUncheckedBackgroundColor| Color | 禁用且未选中状态时背景色 |
70+
71+
## 进阶用法
72+
73+
### 自定义颜色
74+
75+
```kotlin
76+
var checked by remember { mutableStateOf(false) }
77+
Checkbox(
78+
checked = checked,
79+
onCheckedChange = { checked = it },
80+
colors = CheckboxDefaults.checkboxColors(
81+
checkedBackgroundColor = Color.Red,
82+
checkedForegroundColor = Color.White
83+
)
84+
)
85+
```
86+
87+
### 结合文本使用
88+
89+
```kotlin
90+
var checked by remember { mutableStateOf(false) }
91+
Row(
92+
verticalAlignment = Alignment.CenterVertically,
93+
modifier = Modifier.padding(16.dp)
94+
) {
95+
Checkbox(
96+
checked = checked,
97+
onCheckedChange = { checked = it }
98+
)
99+
Spacer(modifier = Modifier.width(8.dp))
100+
Text(text = "接受用户协议与隐私政策")
101+
}
102+
```
103+
104+
### 在列表中使用
105+
106+
```kotlin
107+
val options = listOf("选项 A", "选项 B", "选项 C")
108+
val checkedStates = remember { mutableStateListOf(false, true, false) }
109+
LazyColumn {
110+
items(options.size) { index ->
111+
Row(
112+
modifier = Modifier.fillMaxWidth().padding(16.dp),
113+
verticalAlignment = Alignment.CenterVertically
114+
) {
115+
Checkbox(
116+
checked = checkedStates[index],
117+
onCheckedChange = { checkedStates[index] = it }
118+
)
119+
Spacer(modifier = Modifier.width(8.dp))
120+
Text(text = options[index])
121+
}
122+
}
123+
}
124+
```
125+
126+
### 整行列表可点击
127+
128+
```kotlin
129+
data class Option(val text: String, var isSelected: Boolean)
130+
val options = remember {
131+
mutableStateListOf(
132+
Option("选项 1", false),
133+
Option("选项 2", true),
134+
Option("选项 3", false)
135+
)
136+
}
137+
LazyColumn {
138+
items(options.size) { index ->
139+
Row(
140+
modifier = Modifier
141+
.fillMaxWidth()
142+
.clickable {
143+
options[index] = options[index].copy(
144+
isSelected = !options[index].isSelected
145+
)
146+
}
147+
.padding(16.dp),
148+
verticalAlignment = Alignment.CenterVertically
149+
) {
150+
Checkbox(
151+
checked = options[index].isSelected,
152+
onCheckedChange = { selected ->
153+
options[index] = options[index].copy(isSelected = selected)
154+
}
155+
)
156+
Spacer(modifier = Modifier.width(16.dp))
157+
Text(text = options[index].text)
158+
}
159+
}
160+
}
161+
```

‎docs/components/switch.md‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
# Switch
2+
3+
`Switch` 是 Miuix 中的切换组件，用于在两种状态之间进行切换。它提供了具有动画效果的交互式开关控件，适用于设置项的启用与禁用场景。
4+
5+
## 引入
6+
7+
```kotlin
8+
import top.yukonga.miuix.kmp.basic.Switch
9+
```
10+
11+
## 基本用法
12+
13+
Switch 组件可以用于在两种状态间切换：
14+
15+
```kotlin
16+
var checked by remember { mutableStateOf(false) }
17+
Switch(
18+
checked = checked,
19+
onCheckedChange = { checked = it }
20+
)
21+
```
22+
23+
## 组件状态
24+
25+
### 禁用状态
26+
27+
```kotlin
28+
var checked by remember { mutableStateOf(false) }
29+
Switch(
30+
checked = checked,
31+
onCheckedChange = { checked = it },
32+
enabled = false
33+
)
34+
```
35+
36+
37+
## 属性
38+
39+
### Switch 属性
40+
41+
| 属性名 | 类型 | 默认值 | 说明 |
42+
| --------------- | -------------------- | ----------------------------- | ------------------------ |
43+
| checked | Boolean | - | 开关是否处于选中状态 |
44+
| onCheckedChange | ((Boolean) -> Unit)? | - | 开关状态变化时的回调函数 |
45+
| modifier | Modifier | Modifier | 应用于开关的修饰符 |
46+
| colors | SwitchColors | SwitchDefaults.switchColors() | 开关的颜色配置 |
47+
| enabled | Boolean | true | 开关是否可交互 |
48+
49+
### SwitchDefaults 对象
50+
51+
SwitchDefaults 对象提供了 Switch 组件的默认颜色配置。
52+
53+
#### 方法
54+
55+
| 方法名 | 返回类型 | 说明 |
56+
| -------------- | ------------ | ---------------------- |
57+
| switchColors() | SwitchColors | 创建开关的默认颜色配置 |
58+
59+
### SwitchColors 类
60+
61+
| 属性名 | 类型 | 说明 |
62+
| --------------------------- | ----- | ---------------------------- |
63+
| checkedThumbColor | Color | 选中状态时滑块的颜色 |
64+
| uncheckedThumbColor | Color | 未选中状态时滑块的颜色 |
65+
| disabledCheckedThumbColor | Color | 禁用且选中状态时滑块的颜色 |
66+
| disabledUncheckedThumbColor | Color | 禁用且未选中状态时滑块的颜色 |
67+
| checkedTrackColor | Color | 选中状态时轨道的颜色 |
68+
| uncheckedTrackColor | Color | 未选中状态时轨道的颜色 |
69+
| disabledCheckedTrackColor | Color | 禁用且选中状态时轨道的颜色 |
70+
| disabledUncheckedTrackColor | Color | 禁用且未选中状态时轨道的颜色 |
71+
72+
## 进阶用法
73+
74+
### 自定义颜色
75+
76+
```kotlin
77+
var checked by remember { mutableStateOf(false) }
78+
Switch(
79+
checked = checked,
80+
onCheckedChange = { checked = it },
81+
colors = SwitchDefaults.switchColors(
82+
checkedTrackColor = Color.Red,
83+
checkedThumbColor = Color.White
84+
)
85+
)
86+
```
87+
88+
### 结合文本使用
89+
90+
```kotlin
91+
var checked by remember { mutableStateOf(false) }
92+
Row(
93+
verticalAlignment = Alignment.CenterVertically,
94+
modifier = Modifier.padding(16.dp)
95+
) {
96+
Switch(
97+
checked = checked,
98+
onCheckedChange = { checked = it }
99+
)
100+
Spacer(modifier = Modifier.width(8.dp))
101+
Text(text = if (checked) "已开启" else "已关闭")
102+
}
103+
```
104+
105+
### 在列表中使用
106+
107+
```kotlin
108+
val options = listOf("飞行模式", "蓝牙", "位置服务")
109+
val checkedStates = remember { mutableStateListOf(false, true, false) }
110+
LazyColumn {
111+
items(options.size) { index ->
112+
Row(
113+
modifier = Modifier.fillMaxWidth().padding(16.dp),
114+
horizontalArrangement = Arrangement.SpaceBetween,
115+
verticalAlignment = Alignment.CenterVertically
116+
) {
117+
Text(text = options[index])
118+
Switch(
119+
checked = checkedStates[index],
120+
onCheckedChange = { checkedStates[index] = it }
121+
)
122+
}
123+
}
124+
}
125+
```
126+
127+
### 整行列表可点击
128+
129+
```kotlin
130+
data class Option(val text: String, var isSelected: Boolean)
131+
val options = remember {
132+
mutableStateListOf(
133+
Option("飞行模式", false),
134+
Option("蓝牙", true),
135+
Option("位置服务", false)
136+
)
137+
}
138+
LazyColumn {
139+
items(options.size) { index ->
140+
Row(
141+
modifier = Modifier
142+
.fillMaxWidth()
143+
.clickable {
144+
options[index] = options[index].copy(
145+
isSelected = !options[index].isSelected
146+
)
147+
}
148+
.padding(16.dp),
149+
horizontalArrangement = Arrangement.SpaceBetween,
150+
verticalAlignment = Alignment.CenterVertically
151+
) {
152+
Text(text = options[index].text)
153+
Switch(
154+
checked = options[index].isSelected,
155+
onCheckedChange = {
156+
options[index] = options[index].copy(
157+
isSelected = !options[index].isSelected
158+
)
159+
}
160+
)
161+
}
162+
}
163+
}
164+
```

‎docs/components/textfield.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,8 @@ TextField(
4848
)
4949
```
5050

51+
## 组件状态
52+
5153
### 禁用状态
5254

5355
```kotlin

‎docs/public/Icon.webp‎

-4.92 KB
Loading

0 commit comments

Comments
 (0)