Skip to content

Commit 60afbb1

Browse files
YuKongAYuKongA
committed
WIP 3
1 parent e64b48d commit 60afbb1

File tree

6 files changed

+686
-28
lines changed

6 files changed

+686
-28
lines changed

‎docs/.vitepress/config.mts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export default defineConfig({
4040
text: '基础组件',
4141
items: [
4242
{ text: 'Surface', link: '/components/surface' },
43-
{ text: 'BasicComponent', link: '/components/component' },
43+
{ text: 'BasicComponent', link: '/components/basiccomponent' },
4444
{ text: 'Button', link: '/components/button' },
4545
{ text: 'Text', link: '/components/text' },
4646
{ text: 'SmallTitle', link: '/components/smalltitle' },

‎docs/components/basiccomponent.md‎

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
# BasicComponent
2+
3+
`BasicComponent` 是 Miuix 中的标准基础组件，广泛用于其他扩展组件。提供了标题、摘要以及左右两侧的可自定义内容区域，常用于构建列表项、设置项等界面元素。本项目以此为基础提供了一些扩展组件，方便开发者快速构建符合设计规范的 UI 组件。
4+
5+
## 引入
6+
7+
```kotlin
8+
import top.yukonga.miuix.kmp.basic.BasicComponent
9+
```
10+
11+
## 基本用法
12+
13+
创建一个基础组件，包含标题和摘要：
14+
15+
```kotlin
16+
BasicComponent(
17+
title = "设置项标题",
18+
summary = "这里是设置项的描述文本"
19+
)
20+
```
21+
22+
## 组件变体
23+
24+
### 可点击组件
25+
26+
```kotlin
27+
BasicComponent(
28+
title = "Wi-Fi",
29+
summary = "已连接到 MIUI-WiFi",
30+
onClick = { /* 处理点击事件 */ }
31+
)
32+
```
33+
34+
### 带左侧图标的组件
35+
36+
```kotlin
37+
BasicComponent(
38+
title = "昵称",
39+
summary = "一段简介",
40+
leftAction = {
41+
Icon(
42+
modifier = Modifier.padding(end = 16.dp),
43+
imageVector = MiuixIcons.Useful.Personal,
44+
contentDescription = "头像图标",
45+
tint = MiuixTheme.colorScheme.onBackground
46+
)
47+
},
48+
onClick = { /* 处理点击事件 */ }
49+
)
50+
```
51+
52+
### 带右侧操作的组件
53+
54+
```kotlin
55+
var isFlightMode by remember { mutableStateOf(false) }
56+
BasicComponent(
57+
title = "飞行模式",
58+
rightActions = {
59+
Switch(
60+
checked = isFlightMode,
61+
onCheckedChange = { isFlightMode = it }
62+
)
63+
}
64+
)
65+
```
66+
67+
### 禁用状态
68+
69+
```kotlin
70+
BasicComponent(
71+
title = "移动网络",
72+
summary = "SIM卡未插入",
73+
enabled = false
74+
)
75+
```
76+
77+
## 属性
78+
79+
### BasicComponent 属性
80+
81+
| 属性名 | 类型 | 默认值 | 说明 |
82+
| ----------------- | ------------------------------- | ----------------------------------------- | -------------------- |
83+
| modifier | Modifier | Modifier | 应用于组件的修饰符 |
84+
| insideMargin | PaddingValues | BasicComponentDefaults.InsideMargin | 组件内部边距 |
85+
| title | String? | null | 组件标题 |
86+
| titleColor | BasicComponentColors | BasicComponentDefaults.titleColor() | 标题颜色配置 |
87+
| summary | String? | null | 组件摘要 |
88+
| summaryColor | BasicComponentColors | BasicComponentDefaults.summaryColor() | 摘要颜色配置 |
89+
| leftAction | @Composable (() -> Unit?)? | null | 组件左侧的可组合内容 |
90+
| rightActions | @Composable RowScope.() -> Unit | {} | 组件右侧的可组合内容 |
91+
| onClick | (() -> Unit)? | null | 点击组件时触发的回调 |
92+
| enabled | Boolean | true | 组件是否可用 |
93+
| interactionSource | MutableInteractionSource | `remember { MutableInteractionSource() }` | 组件的交互源 |
94+
95+
### BasicComponentDefaults 对象
96+
97+
BasicComponentDefaults 对象提供了 BasicComponent 组件的默认值和颜色配置。
98+
99+
#### 常量
100+
101+
| 常量名 | 类型 | 值 | 说明 |
102+
| ------------ | ------------- | -------------------- | -------------- |
103+
| InsideMargin | PaddingValues | PaddingValues(16.dp) | 组件的内部边距 |
104+
105+
#### 方法
106+
107+
| 方法名 | 返回类型 | 说明 |
108+
| -------------- | -------------------- | ---------------- |
109+
| titleColor() | BasicComponentColors | 创建标题颜色配置 |
110+
| summaryColor() | BasicComponentColors | 创建摘要颜色配置 |
111+
112+
### BasicComponentColors 类
113+
114+
用于配置组件的颜色状态。
115+
116+
| 属性名 | 类型 | 说明 |
117+
| ------------- | ----- | -------------- |
118+
| color | Color | 正常状态的颜色 |
119+
| disabledColor | Color | 禁用状态的颜色 |
120+
121+
## 进阶用法
122+
123+
### 复杂布局组件
124+
125+
```kotlin
126+
BasicComponent(
127+
title = "音量",
128+
summary = "媒体音量：70%",
129+
leftAction = {
130+
Icon(
131+
modifier = Modifier.padding(end = 16.dp),
132+
imageVector = MiuixIcons.Useful.Play,
133+
contentDescription = "音量图标",
134+
tint = MiuixTheme.colorScheme.onBackground
135+
)
136+
},
137+
rightActions = {
138+
IconButton(onClick = { /* 减小音量 */ }) {
139+
Icon(
140+
imageVector = MiuixIcons.Useful.Remove,
141+
contentDescription = "减小音量",
142+
tint = MiuixTheme.colorScheme.onBackground
143+
)
144+
}
145+
Text("70%")
146+
IconButton(onClick = { /* 增大音量 */ }) {
147+
Icon(
148+
imageVector = MiuixIcons.Useful.New,
149+
contentDescription = "增大音量",
150+
tint = MiuixTheme.colorScheme.onBackground
151+
)
152+
}
153+
}
154+
)
155+
```
156+
157+
### 自定义样式组件
158+
159+
```kotlin
160+
BasicComponent(
161+
title = "自定义组件",
162+
summary = "使用自定义颜色",
163+
titleColor = BasicComponentColors(
164+
color = Color.Blue,
165+
disabledColor = Color.Gray
166+
),
167+
summaryColor = BasicComponentColors(
168+
color = Color.DarkGray,
169+
disabledColor = Color.LightGray
170+
),
171+
insideMargin = PaddingValues(horizontal = 24.dp, vertical = 12.dp),
172+
onClick = { /* 处理选项点击 */ }
173+
)
174+
```
175+
176+
### 列表中使用
177+
178+
```kotlin
179+
val options = listOf("选项1", "选项2", "选项3", "选项4")
180+
Column {
181+
options.forEach { option ->
182+
BasicComponent(
183+
title = option,
184+
onClick = { /* 处理选项点击 */ }
185+
)
186+
}
187+
}
188+
```

‎docs/components/button.md‎

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
# Button
2+
3+
`Button` 是 Miuix 中的交互基础组件，用于触发操作或事件。提供了多种风格选择，包括主要按钮、次要按钮和文本按钮。
4+
5+
## 引入
6+
7+
```kotlin
8+
import top.yukonga.miuix.kmp.basic.Button
9+
```
10+
11+
## 基本用法
12+
13+
基础按钮组件，用于触发操作：
14+
15+
```kotlin
16+
Button(
17+
onClick = { /* 处理点击事件 */ }
18+
) {
19+
Text("按钮")
20+
}
21+
```
22+
23+
## 按钮类型
24+
25+
Miuix 提供了多种类型的按钮，适用于不同的场景和重要程度：
26+
27+
### 主要按钮（Primary Button）
28+
29+
```kotlin
30+
Button(
31+
onClick = { /* 处理点击事件 */ },
32+
colors = ButtonDefaults.buttonColorsPrimary()
33+
) {
34+
Text("主要按钮")
35+
}
36+
```
37+
38+
### 次要按钮（Secondary Button）
39+
40+
```kotlin
41+
Button(
42+
onClick = { /* 处理点击事件 */ },
43+
colors = ButtonDefaults.buttonColors()
44+
) {
45+
Text("次要按钮")
46+
}
47+
```
48+
49+
### 禁用状态
50+
51+
```kotlin
52+
Button(
53+
onClick = { /* 处理点击事件 */ },
54+
enabled = false
55+
) {
56+
Text("禁用按钮")
57+
}
58+
```
59+
60+
### 文本按钮（Text Button）
61+
62+
```kotlin
63+
TextButton(
64+
text = "文本按钮",
65+
onClick = { /* 处理点击事件 */ }
66+
)
67+
```
68+
69+
## 属性
70+
71+
### Button 属性
72+
73+
| 属性名 | 类型 | 默认值 | 说明 |
74+
| ------------ | ------------------------------- | ----------------------------- | ------------------------ |
75+
| onClick | () -> Unit | - | 点击按钮时触发的回调 |
76+
| modifier | Modifier | Modifier | 应用于按钮的修饰符 |
77+
| enabled | Boolean | true | 按钮是否可点击 |
78+
| cornerRadius | Dp | ButtonDefaults.CornerRadius | 按钮圆角半径 |
79+
| minWidth | Dp | ButtonDefaults.MinWidth | 按钮最小宽度 |
80+
| minHeight | Dp | ButtonDefaults.MinHeight | 按钮最小高度 |
81+
| colors | ButtonColors | ButtonDefaults.buttonColors() | 按钮颜色配置 |
82+
| insideMargin | PaddingValues | ButtonDefaults.InsideMargin | 按钮内部边距 |
83+
| content | @Composable RowScope.() -> Unit | - | 按钮内容区域的可组合函数 |
84+
85+
### TextButton 属性
86+
87+
| 属性名 | 类型 | 默认值 | 说明 |
88+
| ------------ | ---------------- | --------------------------------- | -------------------- |
89+
| text | String | - | 按钮显示的文本 |
90+
| onClick | () -> Unit | - | 点击按钮时触发的回调 |
91+
| modifier | Modifier | Modifier | 应用于按钮的修饰符 |
92+
| enabled | Boolean | true | 按钮是否可点击 |
93+
| colors | TextButtonColors | ButtonDefaults.textButtonColors() | 文本按钮颜色配置 |
94+
| cornerRadius | Dp | ButtonDefaults.CornerRadius | 按钮圆角半径 |
95+
| minWidth | Dp | ButtonDefaults.MinWidth | 按钮最小宽度 |
96+
| minHeight | Dp | ButtonDefaults.MinHeight | 按钮最小高度 |
97+
| insideMargin | PaddingValues | ButtonDefaults.InsideMargin | 按钮内部边距 |
98+
99+
### ButtonDefaults 对象
100+
101+
ButtonDefaults 对象提供了按钮组件的默认值和颜色配置。
102+
103+
#### 常量
104+
105+
| 常量名 | 类型 | 值 | 说明 |
106+
| ------------ | ------------- | -------------------- | -------------- |
107+
| MinWidth | Dp | 58.dp | 按钮的最小宽度 |
108+
| MinHeight | Dp | 40.dp | 按钮的最小高度 |
109+
| CornerRadius | Dp | 16.dp | 按钮的圆角半径 |
110+
| InsideMargin | PaddingValues | PaddingValues(16.dp) | 按钮的内部边距 |
111+
112+
#### 方法
113+
114+
| 方法名 | 返回类型 | 说明 |
115+
| ------------------------- | ---------------- | -------------------------- |
116+
| buttonColors() | ButtonColors | 创建次要按钮的颜色配置 |
117+
| buttonColorsPrimary() | ButtonColors | 创建主要按钮的颜色配置 |
118+
| textButtonColors() | TextButtonColors | 创建次要文本按钮的颜色配置 |
119+
| textButtonColorsPrimary() | TextButtonColors | 创建主要文本按钮的颜色配置 |
120+
121+
## 进阶用法
122+
123+
### 带图标按钮
124+
125+
```kotlin
126+
Button(
127+
onClick = { /* 处理点击事件 */ }
128+
) {
129+
Icon(
130+
imageVector = MiuixIcons.Useful.Like,
131+
contentDescription = "图标"
132+
)
133+
Spacer(modifier = Modifier.width(8.dp))
134+
Text("带图标按钮")
135+
}
136+
```
137+
138+
### 自定义样式按钮
139+
140+
```kotlin
141+
Button(
142+
onClick = { /* 处理点击事件 */ },
143+
colors = ButtonDefaults.buttonColors(
144+
color = Color.Red.copy(alpha = 0.7f)
145+
),
146+
cornerRadius = 8.dp
147+
) {
148+
Text("自定义按钮")
149+
}
150+
```
151+
152+
### 加载状态按钮
153+
154+
```kotlin
155+
var isLoading by remember { mutableStateOf(false) }
156+
val scope = rememberCoroutineScope()
157+
158+
Button(
159+
onClick = {
160+
isLoading = true
161+
// 模拟操作
162+
scope.launch {
163+
delay(2000)
164+
isLoading = false
165+
}
166+
},
167+
enabled = !isLoading
168+
) {
169+
AnimatedVisibility(
170+
visible = isLoading
171+
) {
172+
CircularProgressIndicator(
173+
modifier = Modifier
174+
.padding(end = 8.dp),
175+
size = 20.dp,
176+
strokeWidth = 4.dp
177+
)
178+
}
179+
Text("提交")
180+
}
181+
```

0 commit comments

Comments
 (0)