Skip to content

Commit 5f14345

Browse files
YuKongAYuKongA
committed
WIP 8
1 parent 999b9d7 commit 5f14345

File tree

6 files changed

+450
-3
lines changed

6 files changed

+450
-3
lines changed

‎docs/components/checkbox.md‎

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

3-
`CheckBox` 是 Miuix 中的选择组件，用于在选中与未选中状态间切换。它提供了具有动画效果的交互式选择控件，适用于多选场景和配置项的启用与禁用。
3+
`CheckBox` 是 Miuix 中的基础选择组件，用于在选中与未选中状态间切换。它提供了具有动画效果的交互式选择控件，适用于多选场景和配置项的启用与禁用。
44

55
## 引入
66

‎docs/components/divider.md‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
# Divider
2+
3+
`Divider` 是 Miuix 中的基础布局组件，用于在列表和布局中分隔内容。提供了水平分割线和垂直分割线两种形式。
4+
5+
## 引入
6+
7+
```kotlin
8+
import top.yukonga.miuix.kmp.basic.HorizontalDivider // 水平分割线
9+
import top.yukonga.miuix.kmp.basic.VerticalDivider // 垂直分割线
10+
```
11+
12+
## 基本用法
13+
14+
### 水平分割线
15+
16+
水平分割线用于分隔垂直排列的内容：
17+
18+
```kotlin
19+
Column {
20+
Text("上方内容")
21+
HorizontalDivider()
22+
Text("下方内容")
23+
}
24+
```
25+
26+
### 垂直分割线
27+
28+
垂直分割线用于分隔水平排列的内容：
29+
30+
```kotlin
31+
Row {
32+
Text("左侧内容")
33+
VerticalDivider()
34+
Text("右侧内容")
35+
}
36+
```
37+
38+
## 属性
39+
40+
### HorizontalDivider 属性
41+
42+
| 属性名 | 类型 | 默认值 | 说明 |
43+
| --------- | -------- | ---------------------------- | -------------------- |
44+
| modifier | Modifier | Modifier | 应用于分割线的修饰符 |
45+
| thickness | Dp | DividerDefaults.Thickness | 分割线的厚度 |
46+
| color | Color | DividerDefaults.DividerColor | 分割线的颜色 |
47+
48+
### VerticalDivider 属性
49+
50+
| 属性名 | 类型 | 默认值 | 说明 |
51+
| --------- | -------- | ---------------------------- | -------------------- |
52+
| modifier | Modifier | Modifier | 应用于分割线的修饰符 |
53+
| thickness | Dp | DividerDefaults.Thickness | 分割线的厚度 |
54+
| color | Color | DividerDefaults.DividerColor | 分割线的颜色 |
55+
56+
### DividerDefaults 对象
57+
58+
DividerDefaults 对象提供了分割线组件的默认值。
59+
60+
#### 常量
61+
62+
| 常量名 | 类型 | 值 | 说明 |
63+
| ------------ | ----- | ---------------------------------- | ---------------- |
64+
| Thickness | Dp | 0.75.dp | 分割线的默认厚度 |
65+
| DividerColor | Color | MiuixTheme.colorScheme.dividerLine | 分割线的默认颜色 |
66+
67+
## 进阶用法
68+
69+
### 自定义厚度的分割线
70+
71+
```kotlin
72+
Column {
73+
Text("上方内容")
74+
HorizontalDivider(
75+
thickness = 2.dp
76+
)
77+
Text("下方内容")
78+
}
79+
```
80+
81+
### 自定义颜色的分割线
82+
83+
```kotlin
84+
Column {
85+
Text("上方内容")
86+
HorizontalDivider(
87+
color = Color.Red
88+
)
89+
Text("下方内容")
90+
}
91+
```
92+
93+
### 带内边距的分割线
94+
95+
```kotlin
96+
Column {
97+
Text("上方内容")
98+
HorizontalDivider(
99+
modifier = Modifier.padding(horizontal = 16.dp)
100+
)
101+
Text("下方内容")
102+
}
103+
```
104+
105+
### 使用垂直分割线分隔按钮
106+
107+
```kotlin
108+
Row(
109+
horizontalArrangement = Arrangement.SpaceBetween,
110+
verticalAlignment = Alignment.CenterVertically
111+
) {
112+
Button(onClick = { /* 处理点击事件 */ }) {
113+
Text("取消")
114+
}
115+
VerticalDivider(
116+
modifier = Modifier.height(24.dp)
117+
)
118+
Button(onClick = { /* 处理点击事件 */ }) {
119+
Text("确认")
120+
}
121+
}
122+
```

‎docs/components/floatingactionbutton.md‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
# FloatingActionButton
2+
3+
`FloatingActionButton` 是 Miuix 中的悬浮按钮组件，通常用于展示页面中最重要或最常用的操作。它通常悬浮在界面上方，具有突出的视觉效果，便于用户快速访问。
4+
5+
此组件常常与 `Scaffold` 组件结合使用，以便在应用程序的不同页面中保持一致的布局和行为。
6+
7+
## 引入
8+
9+
```kotlin
10+
import top.yukonga.miuix.kmp.basic.FloatingActionButton
11+
```
12+
13+
## 基本用法
14+
15+
FloatingActionButton 组件可以用于触发重要的操作：
16+
17+
```kotlin
18+
FloatingActionButton(
19+
onClick = { /* 处理点击事件 */ }
20+
) {
21+
Icon(
22+
imageVector = MiuixIcons.Useful.New,
23+
contentDescription = "添加"
24+
)
25+
}
26+
```
27+
28+
## 组件状态
29+
30+
由于本组件通常用于最常用的操作，因此组件本身没有内置状态变化。
31+
32+
## 属性
33+
34+
### FloatingActionButton 属性
35+
36+
| 属性名 | 类型 | 默认值 | 说明 |
37+
| -------------------------- | ---------------------- | ------------------------------ | ------------------------ |
38+
| onClick | () -> Unit | - | 点击按钮时触发的回调 |
39+
| modifier | Modifier | Modifier | 应用于按钮的修饰符 |
40+
| shape | Shape | CircleShape | 按钮的形状 |
41+
| containerColor | Color | MiuixTheme.colorScheme.primary | 按钮的背景颜色 |
42+
| shadowElevation | Dp | 4.dp | 按钮的阴影高度 |
43+
| minWidth | Dp | 60.dp | 按钮的最小宽度 |
44+
| minHeight | Dp | 60.dp | 按钮的最小高度 |
45+
| defaultWindowInsetsPadding | Boolean | true | 是否应用默认窗口插入填充 |
46+
| content | @Composable () -> Unit | - | 按钮内容区域的可组合函数 |
47+
48+
## 进阶用法
49+
50+
### 自定义颜色
51+
52+
```kotlin
53+
FloatingActionButton(
54+
onClick = { /* 处理点击事件 */ },
55+
containerColor = Color.Red
56+
) {
57+
Icon(
58+
imageVector = MiuixIcons.Useful.Like,
59+
contentDescription = "喜欢",
60+
tint = Color.White
61+
)
62+
}
63+
```
64+
65+
### 扩展的悬浮按钮
66+
67+
```kotlin
68+
FloatingActionButton(
69+
onClick = { /* 处理点击事件 */ },
70+
shape = RoundedCornerShape(16.dp),
71+
minWidth = 120.dp
72+
) {
73+
Row(
74+
verticalAlignment = Alignment.CenterVertically,
75+
horizontalArrangement = Arrangement.Center,
76+
modifier = Modifier.padding(horizontal = 16.dp)
77+
) {
78+
Icon(
79+
imageVector = MiuixIcons.Useful.New,
80+
contentDescription = "添加",
81+
tint = Color.White
82+
)
83+
Spacer(modifier = Modifier.width(8.dp))
84+
Text("添加", color = Color.White)
85+
}
86+
}
87+
```
88+
89+
### 绑定到脚手架的悬浮按钮
90+
91+
```kotlin
92+
Scaffold(
93+
floatingActionButton = {
94+
FloatingActionButton(
95+
onClick = { /* 处理点击事件 */ }
96+
) {
97+
Icon(
98+
imageVector = MiuixIcons.Useful.Add,
99+
contentDescription = "添加"
100+
)
101+
}
102+
},
103+
floatingActionButtonPosition = MiuixFabPosition.End
104+
) { innerPadding ->
105+
// 页面内容
106+
Box(modifier = Modifier.padding(innerPadding)) {
107+
// ...
108+
}
109+
}
110+
```
111+
112+
### 带动画效果的悬浮按钮
113+
114+
```kotlin
115+
var expanded by remember { mutableStateOf(false) }
116+
val animatedSize by animateDpAsState(
117+
targetValue = if (expanded) 65.dp else 60.dp,
118+
label = "FAB 尺寸动画",
119+
)
120+
FloatingActionButton(
121+
onClick = { expanded = !expanded },
122+
minWidth = animatedSize,
123+
minHeight = animatedSize
124+
) {
125+
Icon(
126+
imageVector = if (expanded) MiuixIcons.Useful.Remove else MiuixIcons.Useful.New,
127+
contentDescription = if (expanded) "移除" else "添加",
128+
tint = Color.White
129+
)
130+
}
131+
```

0 commit comments

Comments
 (0)