Skip to content

Commit 36abcf0

Browse files
YuKongAYuKongA
committed
WIP [8/N]
1 parent f34ab90 commit 36abcf0

31 files changed

+901
-323
lines changed

‎docs/components/smalltitle.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
`SmallTitle` is a basic title component in Miuix used to create small-sized title text. It follows Miuix's design style with preset font size, weight, and padding.
44

5-
<div style="position: relative; max-width: 700px; height: 350px; border-radius: 10px; overflow: hidden; border: 1px solid #777;">
5+
<div style="position: relative; max-width: 700px; height: 160px; border-radius: 10px; overflow: hidden; border: 1px solid #777;">
66
<iframe id="demoIframe" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;" src="../compose/index.html?id=smallTitle" title="Demo" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin"></iframe>
77
</div>
88

‎docs/components/superarrow.md‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
`SuperArrow` is a directional indicator component in Miuix, typically used for navigation or displaying additional content. It provides a title, summary, and right arrow icon with click interaction support, commonly used in settings, menu items, or list items.
44

5+
<div style="position: relative; max-width: 700px; height: 280px; border-radius: 10px; overflow: hidden; border: 1px solid #777;">
6+
<iframe id="demoIframe" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;" src="../compose/index.html?id=superArrow" title="Demo" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin"></iframe>
7+
</div>
8+
59
## Import
610

711
```kotlin
@@ -47,7 +51,7 @@ SuperArrow(
4751
SuperArrow supports controlling the hold-down state through the `holdDownState` parameter, typically used for visual feedback when displaying popup dialogs:
4852

4953
```kotlin
50-
var showDialog = remember { mutableStateOf(false) }
54+
val showDialog = remember { mutableStateOf(false) }
5155

5256
Scaffold {
5357
SuperArrow(
@@ -137,7 +141,7 @@ SuperArrow(
137141
### Using with Dialog
138142

139143
```kotlin
140-
var showDialog = remember { mutableStateOf(false) }
144+
val showDialog = remember { mutableStateOf(false) }
141145
var language by remember { mutableStateOf("Simplified Chinese") }
142146

143147
Scaffold {

‎docs/components/supercheckbox.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
`SuperCheckbox` is a checkbox component in Miuix that provides a title, summary, and checkbox control. It supports click interactions and is commonly used in multi-select settings and selection lists.
44

5+
<div style="position: relative; max-width: 700px; height: 293px; border-radius: 10px; overflow: hidden; border: 1px solid #777;">
6+
<iframe id="demoIframe" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;" src="../compose/index.html?id=superCheckbox" title="Demo" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin"></iframe>
7+
</div>
8+
59
## Import
610

711
```kotlin

‎docs/components/superdialog.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
`SuperDialog` is a dialog component in Miuix used to display important information, collect user input, or confirm user actions. The dialog appears above the current interface and supports custom styles and content layouts.
44

5+
<div style="position: relative; max-width: 700px; height: 210px; border-radius: 10px; overflow: hidden; border: 1px solid #777;">
6+
<iframe id="demoIframe" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;" src="../compose/index.html?id=superDialog" title="Demo" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin"></iframe>
7+
</div>
8+
59
::: warning
610
`SuperDialog` must be used within a `Scaffold` component!
711
:::

‎docs/components/superdropdown.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
`SuperDropdown` is a dropdown menu component in Miuix that provides a title, summary, and a list of dropdown options. It supports click interaction and is commonly used in option settings and list selections.
44

5+
<div style="position: relative; max-width: 700px; height: 285px; border-radius: 10px; overflow: hidden; border: 1px solid #777;">
6+
<iframe id="demoIframe" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;" src="../compose/index.html?id=superDropdown" title="Demo" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin"></iframe>
7+
</div>
8+
59
::: warning
610
`SuperDropdown` must be used within a `Scaffold` component!
711
:::

‎docs/components/superspinner.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
`SuperSpinner` is a dropdown selector component in Miuix that provides titles, summaries, and a list of options with icons and text. It supports click interaction and various display modes, commonly used in option settings with visual aids. This component is similar to `SuperDropdown` but offers richer functionality and interaction experience.
44

5+
<div style="position: relative; max-width: 700px; height: 282px; border-radius: 10px; overflow: hidden; border: 1px solid #777;">
6+
<iframe id="demoIframe" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;" src="../compose/index.html?id=superSpinner" title="Demo" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin"></iframe>
7+
</div>
8+
59
::: warning
610
`SuperSpinner` must be used within a `Scaffold` component!
711
:::

‎docs/components/superswitch.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
`SuperSwitch` is a switch component in Miuix that provides a title, summary, and a switch control on the right. It supports click interaction and is commonly used in settings items and preference toggles.
44

5+
<div style="position: relative; max-width: 700px; height: 231px; border-radius: 10px; overflow: hidden; border: 1px solid #777;">
6+
<iframe id="demoIframe" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;" src="../compose/index.html?id=superSwitch" title="Demo" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin"></iframe>
7+
</div>
8+
59
## Import
610

711
```kotlin

‎docs/demo/src/commonMain/kotlin/Demo.kt‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,12 @@ private val availableComponents = listOf(
6262
AvailableComponent("SearchBar", "searchBar") { SearchBarDemo() },
6363
AvailableComponent("ColorPicker", "colorPicker") { ColorPickerDemo() },
6464
AvailableComponent("ListPopup", "listPopup") { ListPopupDemo() },
65+
AvailableComponent("SuperArrow", "superArrow") { SuperArrowDemo() },
66+
AvailableComponent("SuperSwitch", "superSwitch") { SuperSwitchDemo() },
67+
AvailableComponent("SuperCheckbox", "superCheckbox") { SuperCheckboxDemo() },
68+
AvailableComponent("SuperDropdown", "superDropdown") { SuperDropdownDemo() },
69+
AvailableComponent("SuperSpinner", "superSpinner") { SuperSpinnerDemo() },
70+
AvailableComponent("SuperDialog", "superDialog") { SuperDialogDemo() },
6571
)
6672

6773
@Composable

‎docs/demo/src/commonMain/kotlin/FloatingActionButtonDemo.kt‎

Lines changed: 50 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import androidx.compose.ui.Modifier
1515
import androidx.compose.ui.graphics.Brush
1616
import androidx.compose.ui.graphics.Color
1717
import androidx.compose.ui.unit.dp
18+
import top.yukonga.miuix.kmp.basic.Card
1819
import top.yukonga.miuix.kmp.basic.FabPosition
1920
import top.yukonga.miuix.kmp.basic.FloatingActionButton
2021
import top.yukonga.miuix.kmp.basic.Icon
@@ -42,56 +43,62 @@ fun FloatingActionButtonDemo() {
4243
Row(
4344
horizontalArrangement = Arrangement.spacedBy(16.dp)
4445
) {
45-
Scaffold(
46-
modifier = Modifier.weight(0.5f),
47-
floatingActionButton = {
48-
FloatingActionButton(
49-
onClick = {
50-
// Handle FAB click
46+
Card(
47+
modifier = Modifier.weight(0.5f)
48+
) {
49+
Scaffold(
50+
floatingActionButton = {
51+
FloatingActionButton(
52+
onClick = {
53+
// Handle FAB click
54+
}
55+
) {
56+
Icon(
57+
imageVector = MiuixIcons.Useful.SelectAll,
58+
contentDescription = "SelectAll",
59+
tint = Color.White
60+
)
5161
}
52-
) {
53-
Icon(
54-
imageVector = MiuixIcons.Useful.SelectAll,
55-
contentDescription = "SelectAll",
56-
tint = Color.White
57-
)
5862
}
59-
}
60-
) { paddingValues ->
61-
LazyColumn(
62-
contentPadding = PaddingValues(top = paddingValues.calculateTopPadding())
63-
) {
64-
items(100) {
65-
SuperArrow(
66-
title = "Something"
67-
)
63+
) { paddingValues ->
64+
LazyColumn(
65+
contentPadding = PaddingValues(top = paddingValues.calculateTopPadding())
66+
) {
67+
items(100) {
68+
SuperArrow(
69+
title = "Something"
70+
)
71+
}
6872
}
6973
}
7074
}
71-
Scaffold(
72-
modifier = Modifier.weight(0.5f),
73-
floatingActionButton = {
74-
FloatingActionButton(
75-
onClick = {
76-
// Handle FAB click
75+
Card(
76+
modifier = Modifier.weight(0.5f)
77+
) {
78+
Scaffold(
79+
floatingActionButton = {
80+
FloatingActionButton(
81+
onClick = {
82+
// Handle FAB click
83+
}
84+
) {
85+
Icon(
86+
imageVector = MiuixIcons.Useful.SelectAll,
87+
contentDescription = "SelectAll",
88+
tint = Color.White
89+
)
7790
}
91+
},
92+
floatingActionButtonPosition = FabPosition.Center
93+
) { paddingValues ->
94+
LazyColumn(
95+
contentPadding = PaddingValues(top = paddingValues.calculateTopPadding())
7896
) {
79-
Icon(
80-
imageVector = MiuixIcons.Useful.SelectAll,
81-
contentDescription = "SelectAll",
82-
tint = Color.White
83-
)
84-
}
85-
},
86-
floatingActionButtonPosition = FabPosition.Center
87-
) { paddingValues ->
88-
LazyColumn(
89-
contentPadding = PaddingValues(top = paddingValues.calculateTopPadding())
90-
) {
91-
items(100) {
92-
SuperArrow(
93-
title = "Something"
94-
)
97+
items(100) {
98+
SuperArrow(
99+
title = "Something"
100+
)
101+
}
95102
}
96103
}
97104
}

‎docs/demo/src/commonMain/kotlin/FloatingToolbarDemo.kt‎

Lines changed: 53 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import androidx.compose.ui.Modifier
1515
import androidx.compose.ui.graphics.Brush
1616
import androidx.compose.ui.graphics.Color
1717
import androidx.compose.ui.unit.dp
18+
import top.yukonga.miuix.kmp.basic.Card
1819
import top.yukonga.miuix.kmp.basic.FloatingToolbar
1920
import top.yukonga.miuix.kmp.basic.Icon
2021
import top.yukonga.miuix.kmp.basic.IconButton
@@ -44,60 +45,66 @@ fun FloatingToolbarDemo() {
4445
Row(
4546
horizontalArrangement = Arrangement.spacedBy(16.dp)
4647
) {
47-
Scaffold(
48-
modifier = Modifier.weight(0.5f),
49-
floatingToolbar = {
50-
FloatingToolbar {
51-
Row(
52-
modifier = Modifier.padding(8.dp),
53-
horizontalArrangement = Arrangement.spacedBy(8.dp)
54-
) { // or Column
55-
IconButton(onClick = { /* Action 1 */ }) {
56-
Icon(MiuixIcons.Useful.Edit, contentDescription = "Edit")
57-
}
58-
IconButton(onClick = { /* Action 2 */ }) {
59-
Icon(MiuixIcons.Useful.Delete, contentDescription = "Delete")
48+
Card(
49+
modifier = Modifier.weight(0.5f)
50+
) {
51+
Scaffold(
52+
floatingToolbar = {
53+
FloatingToolbar {
54+
Row(
55+
modifier = Modifier.padding(8.dp),
56+
horizontalArrangement = Arrangement.spacedBy(8.dp)
57+
) { // or Column
58+
IconButton(onClick = { /* Action 1 */ }) {
59+
Icon(MiuixIcons.Useful.Edit, contentDescription = "Edit")
60+
}
61+
IconButton(onClick = { /* Action 2 */ }) {
62+
Icon(MiuixIcons.Useful.Delete, contentDescription = "Delete")
63+
}
6064
}
6165
}
6266
}
63-
}
64-
) { paddingValues ->
65-
LazyColumn(
66-
contentPadding = PaddingValues(top = paddingValues.calculateTopPadding())
67-
) {
68-
items(100) {
69-
SuperArrow(
70-
title = "Something"
71-
)
67+
) { paddingValues ->
68+
LazyColumn(
69+
contentPadding = PaddingValues(top = paddingValues.calculateTopPadding())
70+
) {
71+
items(100) {
72+
SuperArrow(
73+
title = "Something"
74+
)
75+
}
7276
}
7377
}
7478
}
75-
Scaffold(
76-
modifier = Modifier.weight(0.5f),
77-
floatingToolbar = {
78-
FloatingToolbar {
79-
Row(
80-
modifier = Modifier.padding(8.dp),
81-
horizontalArrangement = Arrangement.spacedBy(8.dp)
82-
) { // or Column
83-
IconButton(onClick = { /* Action 1 */ }) {
84-
Icon(MiuixIcons.Useful.Edit, contentDescription = "Edit")
85-
}
86-
IconButton(onClick = { /* Action 2 */ }) {
87-
Icon(MiuixIcons.Useful.Delete, contentDescription = "Delete")
79+
Card(
80+
modifier = Modifier.weight(0.5f)
81+
) {
82+
Scaffold(
83+
floatingToolbar = {
84+
FloatingToolbar {
85+
Row(
86+
modifier = Modifier.padding(8.dp),
87+
horizontalArrangement = Arrangement.spacedBy(8.dp)
88+
) { // or Column
89+
IconButton(onClick = { /* Action 1 */ }) {
90+
Icon(MiuixIcons.Useful.Edit, contentDescription = "Edit")
91+
}
92+
IconButton(onClick = { /* Action 2 */ }) {
93+
Icon(MiuixIcons.Useful.Delete, contentDescription = "Delete")
94+
}
8895
}
8996
}
90-
}
91-
},
92-
floatingToolbarPosition = ToolbarPosition.BottomEnd
93-
) { paddingValues ->
94-
LazyColumn(
95-
contentPadding = PaddingValues(top = paddingValues.calculateTopPadding())
96-
) {
97-
items(100) {
98-
SuperArrow(
99-
title = "Something"
100-
)
97+
},
98+
floatingToolbarPosition = ToolbarPosition.BottomEnd
99+
) { paddingValues ->
100+
LazyColumn(
101+
contentPadding = PaddingValues(top = paddingValues.calculateTopPadding())
102+
) {
103+
items(100) {
104+
SuperArrow(
105+
title = "Something"
106+
)
107+
}
101108
}
102109
}
103110
}

0 commit comments

Comments
 (0)