WIP 20

Author: YuKongA

docs/components/basiccomponent.md

@@ -55,6 +55,7 @@ BasicComponent(
 
 ```kotlin
 var isFlightMode by remember { mutableStateOf(false) }
+
 BasicComponent(
     title = "飞行模式",
     rightActions = {
@@ -181,6 +182,7 @@ BasicComponent(
 
 ```kotlin
 val options = listOf("选项1", "选项2", "选项3", "选项4")
+
 Column {
     options.forEach { option ->
         BasicComponent(

docs/components/button.md

@@ -156,6 +156,7 @@ Button(
 ```kotlin
 var isLoading by remember { mutableStateOf(false) }
 val scope = rememberCoroutineScope()
+
 Button(
     onClick = {
         isLoading = true

docs/components/checkbox.md

@@ -14,6 +14,7 @@ CheckBox 组件可以用于创建可选择的选项：
 
 ```kotlin
 var checked by remember { mutableStateOf(false) }
+
 Checkbox(
     checked = checked,
     onCheckedChange = { checked = it }
@@ -26,6 +27,7 @@ Checkbox(
 
 ```kotlin
 var checked by remember { mutableStateOf(false) }
+
 Checkbox(
     checked = checked,
     onCheckedChange = { checked = it },
@@ -74,6 +76,7 @@ CheckboxDefaults 对象提供了 Checkbox 组件的默认颜色配置。
 
 ```kotlin
 var checked by remember { mutableStateOf(false) }
+
 Checkbox(
     checked = checked,
     onCheckedChange = { checked = it },
@@ -88,6 +91,7 @@ Checkbox(
 
 ```kotlin
 var checked by remember { mutableStateOf(false) }
+
 Row(
     verticalAlignment = Alignment.CenterVertically,
     modifier = Modifier.padding(16.dp)
@@ -106,6 +110,7 @@ Row(
 ```kotlin
 val options = listOf("选项 A", "选项 B", "选项 C")
 val checkedStates = remember { mutableStateListOf(false, true, false) }
+
 LazyColumn {
     items(options.size) { index ->
         Row(
@@ -134,6 +139,7 @@ val options = remember {
         Option("选项 3", false)
     )
 }
+
 LazyColumn {
     items(options.size) { index ->
         Row(

docs/components/colorpicker.md

@@ -14,6 +14,7 @@ ColorPicker 组件可以让用户选择自定义颜色：
 
 ```kotlin
 var selectedColor by remember { mutableStateOf(Color.Red) }
+
 ColorPicker(
     initialColor = selectedColor,
     onColorChanged = { newColor ->
@@ -68,6 +69,7 @@ ColorPicker 提供了四种不同的滑块组件，可以单独使用：
 
 ```kotlin
 var hue by remember { mutableStateOf(0f) }
+
 HueSlider(
     currentHue = hue,
     onHueChanged = { newHue -> 
@@ -80,6 +82,7 @@ HueSlider(
 
 ```kotlin
 var saturation by remember { mutableStateOf(0.5f) }
+
 SaturationSlider(
     currentHue = 180f, // 当前色相
     currentSaturation = saturation,
@@ -93,6 +96,7 @@ SaturationSlider(
 
 ```kotlin
 var value by remember { mutableStateOf(0.5f) }
+
 ValueSlider(
     currentHue = 180f, // 当前色相
     currentSaturation = 0.5f, // 当前饱和度
@@ -107,6 +111,7 @@ ValueSlider(
 
 ```kotlin
 var alpha by remember { mutableStateOf(1f) }
+
 AlphaSlider(
     currentHue = 180f, // 当前色相
     currentSaturation = 0.5f, // 当前饱和度
@@ -133,13 +138,17 @@ var hexValue by remember(currentColor) {
                 (currentColor.blue * 255).toInt().toString(16).padStart(2, '0').uppercase()
     )
 }
+
 Surface {
     Column(
         modifier = Modifier
             .fillMaxWidth()
             .padding(16.dp)
     ) {
-        Text("选择颜色", style = MiuixTheme.textStyles.title2)
+        Text(
+            text = "选择颜色",
+            style = MiuixTheme.textStyles.title2
+        )
         Spacer(modifier = Modifier.height(16.dp))
         ColorPicker(
             initialColor = currentColor,
@@ -168,6 +177,7 @@ Surface {
 ```kotlin
 var showColorDialog = remember { mutableStateOf(false) }
 var selectedColor by remember { mutableStateOf(Color.Red) }
+
 Scaffold { 
     TextButton(
         text = "选择颜色",

docs/components/floatingactionbutton.md

@@ -121,6 +121,7 @@ val animatedSize by animateDpAsState(
     targetValue = if (expanded) 65.dp else 60.dp,
     label = "FAB 尺寸动画",
 )
+
 FloatingActionButton(
     onClick = { expanded = !expanded },
     minWidth = animatedSize,

docs/components/icon.md

@@ -48,6 +48,7 @@ Icon(
 
 ```kotlin
 val customPainter = remember { /* 自定义 Painter */ }
+
 Icon(
     painter = customPainter,
     contentDescription = "自定义图标"
@@ -163,6 +164,7 @@ Icon(
 
 ```kotlin
 var isSelected by remember { mutableStateOf(false) }
+
 Icon(
     imageVector = if (isSelected) MiuixIcons.Useful.Like else MiuixIcons.Useful.Unlike,
     contentDescription = "喜欢图标",

docs/components/iconbutton.md

@@ -44,8 +44,9 @@ IconButton(
 IconButton 支持通过 `holdDownState` 参数控制按下状态，通常用于显示弹出对话框时的视觉反馈：
 
 ```kotlin
+var showDialog = remember { mutableStateOf(false) }
+
 Scaffold {
-    var showDialog = remember { mutableStateOf(false) }
     IconButton(
         onClick = { showDialog.value = true },
         holdDownState = showDialog.value
@@ -151,6 +152,7 @@ Surface {
 
 ```kotlin
 var isLiked by remember { mutableStateOf(false) }
+
 IconButton(
     onClick = { isLiked = !isLiked }
 ) {

docs/components/listpopup.md

@@ -3,14 +3,15 @@
 `ListPopup` 是 Miuix 中的弹出列表组件，用于显示一个包含多个选项的弹出菜单。它提供了一个轻量级的、悬浮在界面上的临时列表，适用于各种下拉菜单、上下文菜单等场景。
 
 ::: warning 注意
-`ListPopup` 需要在 `Scaffold` 组件内使用！使用 `dismissPopup()` 函数关闭弹出菜单。
+`ListPopup` 需要在 `Scaffold` 组件内使用！请使用 `dismissPopup(show)` 函数关闭弹出菜单。
 :::
 
 ## 引入
 
 ```kotlin
 import top.yukonga.miuix.kmp.basic.ListPopup
 import top.yukonga.miuix.kmp.basic.ListPopupColumn
+import top.yukonga.miuix.kmp.utils.MiuixPopupUtils.Companion.dismissPopup
 ```
 
 ## 基本用法
@@ -21,6 +22,7 @@ ListPopup 组件可以用于创建简单的下拉菜单：
 var showPopup = remember { mutableStateOf(false) }
 var selectedIndex by remember { mutableStateOf(0) }
 val items = listOf("选项 1", "选项 2", "选项 3")
+
 Scaffold {
     Box {
         TextButton(
@@ -58,6 +60,7 @@ ListPopup 可以设置不同的对齐方式：
 
 ```kotlin
 var showPopup = remember { mutableStateOf(false) }
+
 ListPopup(
     show = showPopup,
     onDismissRequest = { dismissPopup(showPopup) } // 关闭弹出菜单
@@ -74,6 +77,7 @@ ListPopup(
 
 ```kotlin
 var showPopup = remember { mutableStateOf(false) }
+
 ListPopup(
     show = showPopup,
     onDismissRequest = { dismissPopup(showPopup) } // 关闭弹出菜单
@@ -134,6 +138,7 @@ PopupPositionProvider 接口定义了计算弹出列表位置的方法。
 
 ```kotlin
 var showPopup = remember { mutableStateOf(false) }
+
 Scaffold {
     Box {
         TextButton(

docs/components/navigationbar.md

@@ -22,6 +22,7 @@ val items = listOf(
     NavigationItem("设置", MiuixIcons.Useful.Settings)
 )
 var selectedIndex by remember { mutableStateOf(0) }
+
 NavigationBar(
     items = items,
     selected = selectedIndex,
@@ -73,6 +74,7 @@ val items = listOf(
     NavigationItem("设置", MiuixIcons.Useful.Settings)
 )
 var selectedIndex by remember { mutableStateOf(0) }
+
 NavigationBar(
     items = items,
     selected = selectedIndex,
@@ -90,6 +92,7 @@ val items = listOf(
     NavigationItem("设置", MiuixIcons.Useful.Settings)
 )
 var selectedIndex by remember { mutableStateOf(0) }
+
 NavigationBar(
     items = items,
     selected = selectedIndex,
@@ -119,6 +122,7 @@ val items = listOf(
     NavigationItem("设置", MiuixIcons.Useful.Settings)
 )
 var selectedIndex by remember { mutableStateOf(0) }
+
 Scaffold(
     bottomBar = {
         NavigationBar(

docs/components/progressindicator.md

@@ -16,24 +16,33 @@ import top.yukonga.miuix.kmp.basic.InfiniteProgressIndicator // 无限旋转指
 
 线性进度条可用于展示操作的进度：
 
+
+
 ```kotlin
 // 确定进度的线性进度条
 var progress by remember { mutableStateOf(0.3f) }
+
 LinearProgressIndicator(progress = progress)
+```
 
+```kotlin
 // 不确定进度的线性进度条
 LinearProgressIndicator()
 ```
 
+
 ### 环形进度条
 
 环形进度条适用于需要节省空间的场景：
 
 ```kotlin
 // 确定进度的环形进度条
 var progress by remember { mutableStateOf(0.7f) }
+
 CircularProgressIndicator(progress = progress)
+```
 
+```kotlin
 // 不确定进度的环形进度条
 CircularProgressIndicator()
 ```
@@ -56,6 +65,7 @@ InfiniteProgressIndicator()
 
 ```kotlin
 var progress by remember { mutableStateOf(0.6f) }
+
 LinearProgressIndicator(progress = progress)
 CircularProgressIndicator(progress = progress)
 ```
@@ -135,6 +145,7 @@ ProgressIndicatorDefaults 对象提供了进度指示器组件的默认值和颜
 
 ```kotlin
 var progress by remember { mutableStateOf(0.4f) }
+
 LinearProgressIndicator(
     progress = progress,
     colors = ProgressIndicatorDefaults.progressIndicatorColors(
@@ -148,6 +159,7 @@ LinearProgressIndicator(
 
 ```kotlin
 var progress by remember { mutableStateOf(0.75f) }
+
 CircularProgressIndicator(
     progress = progress,
     size = 50.dp,
@@ -160,6 +172,7 @@ CircularProgressIndicator(
 ```kotlin
 var isLoading by remember { mutableStateOf(false) }
 val scope = rememberCoroutineScope()
+
 Button(
     onClick = {
         isLoading = true
@@ -200,6 +213,7 @@ InfiniteProgressIndicator(
 
 ```kotlin
 var isLoading by remember { mutableStateOf(true) }
+
 Card(
     modifier = Modifier
         .fillMaxWidth()