Skip to content

Commit 14ac62a

Browse files
YuKongAYuKongA
committed
WIP [5/N]
1 parent 8808fd6 commit 14ac62a

19 files changed

+1060
-14
lines changed

‎docs/components/floatingtoolbar.md‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,10 @@ import top.yukonga.miuix.kmp.basic.ToolbarPosition // Used for Scaffold
1818
Scaffold(
1919
floatingToolbar = {
2020
FloatingToolbar {
21-
Row { // or Column
21+
Row(
22+
modifier = Modifier.padding(8.dp),
23+
horizontalArrangement = Arrangement.spacedBy(8.dp)
24+
) { // or Column
2225
IconButton(onClick = { /* Action 1 */ }) {
2326
Icon(MiuixIcons.Useful.Edit, contentDescription = "Edit")
2427
}
@@ -70,7 +73,10 @@ FloatingToolbar(
7073
outSidePadding = PaddingValues(24.dp),
7174
showDivider = false
7275
) {
73-
Row(modifier = Modifier.padding(horizontal = 8.dp)) {
76+
Row(
77+
modifier = Modifier.padding(8.dp),
78+
horizontalArrangement = Arrangement.spacedBy(8.dp)
79+
) { // or Column
7480
IconButton(onClick = { /* Action 1 */ }) {
7581
Icon(MiuixIcons.Useful.Edit, contentDescription = "Edit", tint = MiuixTheme.colorScheme.onPrimaryContainer)
7682
}
@@ -85,7 +91,10 @@ FloatingToolbar(
8591

8692
```kotlin
8793
FloatingToolbar {
88-
Column(modifier = Modifier.padding(vertical = 8.dp)) {
94+
Column(
95+
modifier = Modifier.padding(vertical = 8.dp),
96+
verticalArrangement = Arrangement.spacedBy(8.dp)
97+
) {
8998
IconButton(onClick = { /* Action 1 */ }) {
9099
Icon(MiuixIcons.Useful.Edit, contentDescription = "Edit")
91100
}

‎docs/components/text.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ Text(
5757

5858
Text(
5959
text = "Secondary Text",
60-
color = MiuixTheme.colorScheme.onSurfaceVariant
60+
color = MiuixTheme.colorScheme.onSurfaceContainerVariant
6161
)
6262
```
6363

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

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import androidx.compose.foundation.background
2+
import androidx.compose.foundation.layout.Arrangement
3+
import androidx.compose.foundation.layout.Box
4+
import androidx.compose.foundation.layout.Column
5+
import androidx.compose.foundation.layout.fillMaxSize
6+
import androidx.compose.foundation.layout.fillMaxWidth
7+
import androidx.compose.foundation.layout.padding
8+
import androidx.compose.foundation.layout.widthIn
9+
import androidx.compose.runtime.Composable
10+
import androidx.compose.ui.Alignment
11+
import androidx.compose.ui.Modifier
12+
import androidx.compose.ui.graphics.Brush
13+
import androidx.compose.ui.graphics.Color
14+
import androidx.compose.ui.unit.dp
15+
import top.yukonga.miuix.kmp.basic.BasicComponent
16+
import top.yukonga.miuix.kmp.basic.Card
17+
import top.yukonga.miuix.kmp.basic.Icon
18+
import top.yukonga.miuix.kmp.icon.MiuixIcons
19+
import top.yukonga.miuix.kmp.icon.icons.useful.Personal
20+
import top.yukonga.miuix.kmp.theme.MiuixTheme
21+
22+
@Composable
23+
fun BasicComponentDemo() {
24+
Box(
25+
modifier = Modifier
26+
.fillMaxSize()
27+
.background(Brush.linearGradient(listOf(Color(0xfff77062), Color(0xfffe5196)))),
28+
contentAlignment = Alignment.Center
29+
) {
30+
Column(
31+
Modifier
32+
.padding(16.dp)
33+
.widthIn(max = 600.dp)
34+
.fillMaxWidth(),
35+
verticalArrangement = Arrangement.spacedBy(16.dp),
36+
horizontalAlignment = Alignment.CenterHorizontally
37+
) {
38+
Card {
39+
BasicComponent(
40+
title = "BasicComponent",
41+
summary = "Without onClick"
42+
)
43+
BasicComponent(
44+
title = "Wi-Fi",
45+
summary = "Connected to MIUI-WiFi",
46+
onClick = { /* Handle click event */ }
47+
)
48+
BasicComponent(
49+
title = "Nickname",
50+
summary = "A brief introduction",
51+
leftAction = {
52+
Icon(
53+
modifier = Modifier.padding(end = 16.dp),
54+
imageVector = MiuixIcons.Useful.Personal,
55+
contentDescription = "Avatar Icon",
56+
tint = MiuixTheme.colorScheme.onBackground
57+
)
58+
},
59+
onClick = { /* Handle click event */ }
60+
)
61+
BasicComponent(
62+
title = "Mobile Network",
63+
summary = "SIM card not inserted",
64+
enabled = false
65+
)
66+
}
67+
}
68+
}
69+
}

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

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,10 @@ import androidx.compose.foundation.layout.fillMaxWidth
88
import androidx.compose.foundation.layout.padding
99
import androidx.compose.foundation.layout.widthIn
1010
import androidx.compose.runtime.Composable
11+
import androidx.compose.runtime.getValue
1112
import androidx.compose.runtime.mutableStateOf
1213
import androidx.compose.runtime.remember
14+
import androidx.compose.runtime.setValue
1315
import androidx.compose.ui.Alignment
1416
import androidx.compose.ui.Modifier
1517
import androidx.compose.ui.graphics.Brush
@@ -33,18 +35,18 @@ fun CheckboxDemo() {
3335
verticalArrangement = Arrangement.spacedBy(16.dp),
3436
horizontalAlignment = Alignment.CenterHorizontally
3537
) {
36-
val checkbox = remember { mutableStateOf(false) }
37-
val checkboxTrue = remember { mutableStateOf(true) }
38+
var checkbox1 by remember { mutableStateOf(false) }
39+
var checkbox2 by remember { mutableStateOf(true) }
3840
Row(
3941
horizontalArrangement = Arrangement.spacedBy(32.dp),
4042
) {
4143
Checkbox(
42-
checked = checkbox.value,
43-
onCheckedChange = { checkbox.value = it }
44+
checked = checkbox1,
45+
onCheckedChange = { checkbox1 = it }
4446
)
4547
Checkbox(
46-
checked = checkboxTrue.value,
47-
onCheckedChange = { checkboxTrue.value = it }
48+
checked = checkbox2,
49+
onCheckedChange = { checkbox2 = it }
4850
)
4951
Checkbox(
5052
checked = false,

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,13 +38,26 @@ fun Demo(demoId: String? = null) {
3838
private data class AvailableComponent(val name: String, val id: String, val demo: @Composable () -> Unit)
3939

4040
private val availableComponents = listOf(
41+
AvailableComponent("Scaffold", "scaffold") { ScaffoldDemo() },
4142
AvailableComponent("Surface", "surface") { SurfaceDemo() },
4243
AvailableComponent("TopAppBar", "topAppBar") { TopAppBarDemo() },
4344
AvailableComponent("NavigationBar", "navigationBar") { NavigationBarDemo() },
45+
AvailableComponent("TabRow", "tabRow") { TabRowDemo() },
4446
AvailableComponent("Card", "card") { CardDemo() },
47+
AvailableComponent("BasicComponent", "basicComponent") { BasicComponentDemo() },
4548
AvailableComponent("Button", "button") { ButtonDemo() },
4649
AvailableComponent("IconButton", "iconButton") { IconButtonDemo() },
50+
AvailableComponent("Text", "text") { TextDemo() },
51+
AvailableComponent("SmallTitle", "smallTitle") { SmallTitleDemo() },
52+
AvailableComponent("TextField", "textField") { TextFieldDemo() },
53+
AvailableComponent("Switch", "switch") { SwitchDemo() },
4754
AvailableComponent("Checkbox", "checkbox") { CheckboxDemo() },
55+
AvailableComponent("Slider", "slider") { SliderDemo() },
56+
AvailableComponent("ProgressIndicator", "progressIndicator") { ProgressIndicatorDemo() },
57+
AvailableComponent("Icon", "icon") { IconDemo() },
58+
AvailableComponent("FloatingActionButton", "floatingActionButton") { FloatingActionButtonDemo() },
59+
AvailableComponent("FloatingToolbar", "floatingToolbar") { FloatingToolbarDemo() },
60+
AvailableComponent("DividerDemo", "dividerDemo") { DividerDemo() },
4861
AvailableComponent("ColorPicker", "colorPicker") { ColorPickerDemo() },
4962

5063
)

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

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import androidx.compose.foundation.background
2+
import androidx.compose.foundation.layout.Arrangement
3+
import androidx.compose.foundation.layout.Box
4+
import androidx.compose.foundation.layout.Column
5+
import androidx.compose.foundation.layout.IntrinsicSize
6+
import androidx.compose.foundation.layout.PaddingValues
7+
import androidx.compose.foundation.layout.Row
8+
import androidx.compose.foundation.layout.fillMaxSize
9+
import androidx.compose.foundation.layout.fillMaxWidth
10+
import androidx.compose.foundation.layout.height
11+
import androidx.compose.foundation.layout.padding
12+
import androidx.compose.foundation.layout.widthIn
13+
import androidx.compose.runtime.Composable
14+
import androidx.compose.ui.Alignment
15+
import androidx.compose.ui.Modifier
16+
import androidx.compose.ui.graphics.Brush
17+
import androidx.compose.ui.graphics.Color
18+
import androidx.compose.ui.text.style.TextAlign
19+
import androidx.compose.ui.unit.dp
20+
import top.yukonga.miuix.kmp.basic.Card
21+
import top.yukonga.miuix.kmp.basic.HorizontalDivider
22+
import top.yukonga.miuix.kmp.basic.Text
23+
import top.yukonga.miuix.kmp.basic.VerticalDivider
24+
25+
@Composable
26+
fun DividerDemo() {
27+
Box(
28+
modifier = Modifier
29+
.fillMaxSize()
30+
.background(Brush.linearGradient(listOf(Color(0xfff77062), Color(0xfffe5196)))),
31+
contentAlignment = Alignment.Center
32+
) {
33+
Column(
34+
Modifier
35+
.padding(16.dp)
36+
.widthIn(max = 600.dp)
37+
.fillMaxWidth(),
38+
verticalArrangement = Arrangement.spacedBy(16.dp),
39+
horizontalAlignment = Alignment.CenterHorizontally
40+
) {
41+
Row(
42+
horizontalArrangement = Arrangement.spacedBy(32.dp),
43+
) {
44+
Card(
45+
modifier = Modifier.weight(0.5f),
46+
insideMargin = PaddingValues(16.dp)
47+
) {
48+
Text(
49+
text = "Content Above",
50+
modifier = Modifier.fillMaxWidth(),
51+
textAlign = TextAlign.Center
52+
)
53+
HorizontalDivider(
54+
modifier = Modifier.padding(vertical = 8.dp),
55+
)
56+
Text(
57+
text = "Content Below",
58+
modifier = Modifier.fillMaxWidth(),
59+
textAlign = TextAlign.Center
60+
)
61+
}
62+
Card(
63+
modifier = Modifier.weight(0.5f),
64+
insideMargin = PaddingValues(16.dp)
65+
) {
66+
Row(
67+
modifier = Modifier.height(IntrinsicSize.Min)
68+
) {
69+
Text(
70+
text = "Left Content",
71+
modifier = Modifier.weight(1f),
72+
textAlign = TextAlign.Center
73+
)
74+
VerticalDivider(
75+
modifier = Modifier.padding(horizontal = 8.dp),
76+
)
77+
Text(
78+
text = "Right Content",
79+
modifier = Modifier.weight(1f),
80+
textAlign = TextAlign.Center
81+
)
82+
}
83+
}
84+
}
85+
}
86+
}
87+
}

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

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import androidx.compose.foundation.background
2+
import androidx.compose.foundation.layout.Arrangement
3+
import androidx.compose.foundation.layout.Box
4+
import androidx.compose.foundation.layout.Column
5+
import androidx.compose.foundation.layout.PaddingValues
6+
import androidx.compose.foundation.layout.Row
7+
import androidx.compose.foundation.layout.fillMaxSize
8+
import androidx.compose.foundation.layout.fillMaxWidth
9+
import androidx.compose.foundation.layout.padding
10+
import androidx.compose.foundation.layout.widthIn
11+
import androidx.compose.foundation.lazy.LazyColumn
12+
import androidx.compose.runtime.Composable
13+
import androidx.compose.ui.Alignment
14+
import androidx.compose.ui.Modifier
15+
import androidx.compose.ui.graphics.Brush
16+
import androidx.compose.ui.graphics.Color
17+
import androidx.compose.ui.unit.dp
18+
import top.yukonga.miuix.kmp.basic.FabPosition
19+
import top.yukonga.miuix.kmp.basic.FloatingActionButton
20+
import top.yukonga.miuix.kmp.basic.Icon
21+
import top.yukonga.miuix.kmp.basic.Scaffold
22+
import top.yukonga.miuix.kmp.extra.SuperArrow
23+
import top.yukonga.miuix.kmp.icon.MiuixIcons
24+
import top.yukonga.miuix.kmp.icon.icons.useful.SelectAll
25+
26+
@Composable
27+
fun FloatingActionButtonDemo() {
28+
Box(
29+
modifier = Modifier
30+
.fillMaxSize()
31+
.background(Brush.linearGradient(listOf(Color(0xfff77062), Color(0xfffe5196)))),
32+
contentAlignment = Alignment.Center
33+
) {
34+
Column(
35+
Modifier
36+
.padding(16.dp)
37+
.widthIn(max = 600.dp)
38+
.fillMaxWidth(),
39+
verticalArrangement = Arrangement.spacedBy(16.dp),
40+
horizontalAlignment = Alignment.CenterHorizontally
41+
) {
42+
Row(
43+
horizontalArrangement = Arrangement.spacedBy(16.dp)
44+
) {
45+
Scaffold(
46+
modifier = Modifier.weight(0.5f),
47+
floatingActionButton = {
48+
FloatingActionButton(
49+
onClick = {
50+
// Handle FAB click
51+
}
52+
) {
53+
Icon(
54+
imageVector = MiuixIcons.Useful.SelectAll,
55+
contentDescription = "SelectAll"
56+
)
57+
}
58+
}
59+
) { paddingValues ->
60+
LazyColumn(
61+
contentPadding = PaddingValues(top = paddingValues.calculateTopPadding())
62+
) {
63+
items(100) {
64+
SuperArrow(
65+
title = "Something"
66+
)
67+
}
68+
}
69+
}
70+
Scaffold(
71+
modifier = Modifier.weight(0.5f),
72+
floatingActionButton = {
73+
FloatingActionButton(
74+
onClick = {
75+
// Handle FAB click
76+
}
77+
) {
78+
Icon(
79+
imageVector = MiuixIcons.Useful.SelectAll,
80+
contentDescription = "SelectAll"
81+
)
82+
}
83+
},
84+
floatingActionButtonPosition = FabPosition.Center
85+
) { paddingValues ->
86+
LazyColumn(
87+
contentPadding = PaddingValues(top = paddingValues.calculateTopPadding())
88+
) {
89+
items(100) {
90+
SuperArrow(
91+
title = "Something"
92+
)
93+
}
94+
}
95+
}
96+
}
97+
}
98+
}
99+
}

0 commit comments

Comments
 (0)