Skip to content

Commit f5621a5

Browse files
YuKongAYuKongA
committed
WIP [2/N]
1 parent 3ce9622 commit f5621a5

File tree

13 files changed

+586
-113
lines changed

13 files changed

+586
-113
lines changed

‎docs/components/topappbar.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ Scaffold(
4747
largeTitle = "Large Title", // If not specified, title value will be used
4848
navigationIcon = {
4949
IconButton(onClick = { /* Handle click event */ }) {
50-
Icon(MiuixIcons.Basic.ArrowLeft, contentDescription = "Back")
50+
Icon(MiuixIcons.Useful.Back, contentDescription = "Back")
5151
}
5252
},
5353
actions = {
@@ -83,7 +83,7 @@ Scaffold(
8383
// If you want to add the overscroll effect, please add it before the scroll behavior
8484
.overScrollVertical()
8585
// Bind TopAppBar scroll behavior
86-
.nestedScroll(topAppBarScrollBehavior.nestedScrollConnection),
86+
.nestedScroll(scrollBehavior.nestedScrollConnection),
8787
contentPadding = PaddingValues(top = paddingValues.calculateTopPadding())
8888
) {
8989
// List content

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

Lines changed: 69 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
import androidx.compose.foundation.background
2+
import androidx.compose.foundation.layout.Arrangement
23
import androidx.compose.foundation.layout.Box
4+
import androidx.compose.foundation.layout.Column
35
import androidx.compose.foundation.layout.fillMaxSize
6+
import androidx.compose.foundation.layout.fillMaxWidth
7+
import androidx.compose.foundation.layout.padding
48
import androidx.compose.foundation.layout.size
9+
import androidx.compose.foundation.layout.widthIn
510
import androidx.compose.runtime.Composable
611
import androidx.compose.runtime.getValue
712
import androidx.compose.runtime.mutableStateOf
@@ -13,41 +18,84 @@ import androidx.compose.ui.graphics.Brush
1318
import androidx.compose.ui.graphics.Color
1419
import androidx.compose.ui.unit.dp
1520
import top.yukonga.miuix.kmp.basic.Button
21+
import top.yukonga.miuix.kmp.basic.ButtonDefaults
1622
import top.yukonga.miuix.kmp.basic.Icon
23+
import top.yukonga.miuix.kmp.basic.Text
1724
import top.yukonga.miuix.kmp.basic.TextButton
1825
import top.yukonga.miuix.kmp.icon.MiuixIcons
1926
import top.yukonga.miuix.kmp.icon.icons.useful.Like
27+
import top.yukonga.miuix.kmp.icon.icons.useful.Personal
28+
import top.yukonga.miuix.kmp.theme.MiuixTheme
2029

2130
@Composable
2231
fun ButtonDemo() {
2332
Box(
2433
modifier = Modifier
2534
.fillMaxSize()
26-
.background(Brush.linearGradient(listOf(Color(0xFFFF6F61), Color(0xFFFF8A65)))),
35+
.background(Brush.linearGradient(listOf(Color(0xfff77062), Color(0xfffe5196)))),
2736
contentAlignment = Alignment.Center
2837
) {
29-
var buttonText by remember { mutableStateOf("Click") }
30-
var clickCount1 by remember { mutableStateOf(0) }
31-
var clickCount2 by remember { mutableStateOf(0) }
32-
Button(
33-
onClick = {
34-
clickCount1++
35-
buttonText = "Click: $clickCount1"
36-
}
38+
Column(
39+
Modifier
40+
.padding(16.dp)
41+
.widthIn(max = 600.dp)
42+
.fillMaxWidth(),
43+
verticalArrangement = Arrangement.spacedBy(16.dp),
44+
horizontalAlignment = Alignment.CenterHorizontally
3745
) {
38-
Icon(
39-
imageVector = MiuixIcons.Useful.Like,
40-
contentDescription = null,
41-
tint = Color.Unspecified,
42-
modifier = Modifier.size(24.dp)
46+
var buttonText1 by remember { mutableStateOf("Button") }
47+
var buttonText2 by remember { mutableStateOf("TextButton") }
48+
var clickCount1 by remember { mutableStateOf(0) }
49+
var clickCount2 by remember { mutableStateOf(0) }
50+
Button(
51+
onClick = {
52+
clickCount1++
53+
buttonText1 = "Button: $clickCount1"
54+
}
55+
) {
56+
Icon(
57+
imageVector = MiuixIcons.Useful.Like,
58+
contentDescription = null,
59+
tint = Color.Unspecified,
60+
modifier = Modifier.size(24.dp)
61+
)
62+
Text(
63+
text = buttonText1,
64+
style = MiuixTheme.textStyles.button,
65+
modifier = Modifier.padding(start = 8.dp)
66+
)
67+
}
68+
TextButton(
69+
text = buttonText2,
70+
onClick = {
71+
clickCount2++
72+
buttonText2 = "TextButton: $clickCount2"
73+
},
74+
colors = ButtonDefaults.textButtonColorsPrimary()
4375
)
44-
}
45-
TextButton(
46-
text = buttonText,
47-
onClick = {
48-
clickCount2++
49-
buttonText = "Click: $clickCount2"
76+
Button(
77+
enabled = false,
78+
onClick = {},
79+
colors = ButtonDefaults.buttonColorsPrimary()
80+
) {
81+
Icon(
82+
imageVector = MiuixIcons.Useful.Personal,
83+
contentDescription = null,
84+
tint = MiuixTheme.colorScheme.disabledOnSecondaryVariant,
85+
modifier = Modifier.size(24.dp)
86+
)
87+
Text(
88+
text = "Disabled Button",
89+
style = MiuixTheme.textStyles.button,
90+
color = MiuixTheme.colorScheme.disabledOnSecondaryVariant,
91+
modifier = Modifier.padding(start = 8.dp)
92+
)
5093
}
51-
)
94+
TextButton(
95+
text = "Disabled TextButton",
96+
enabled = false,
97+
onClick = {}
98+
)
99+
}
52100
}
53101
}

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

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
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.runtime.Composable
12+
import androidx.compose.ui.Alignment
13+
import androidx.compose.ui.Modifier
14+
import androidx.compose.ui.graphics.Brush
15+
import androidx.compose.ui.graphics.Color
16+
import androidx.compose.ui.text.font.FontWeight
17+
import androidx.compose.ui.unit.dp
18+
import androidx.compose.ui.unit.sp
19+
import top.yukonga.miuix.kmp.basic.Card
20+
import top.yukonga.miuix.kmp.basic.Text
21+
import top.yukonga.miuix.kmp.theme.MiuixTheme
22+
import top.yukonga.miuix.kmp.utils.PressFeedbackType
23+
24+
@Composable
25+
fun CardDemo() {
26+
Box(
27+
modifier = Modifier
28+
.fillMaxSize()
29+
.background(Brush.linearGradient(listOf(Color(0xfff77062), Color(0xfffe5196)))),
30+
contentAlignment = Alignment.Center
31+
) {
32+
Column(
33+
Modifier
34+
.padding(16.dp)
35+
.widthIn(max = 600.dp)
36+
.fillMaxWidth(),
37+
verticalArrangement = Arrangement.spacedBy(16.dp),
38+
horizontalAlignment = Alignment.CenterHorizontally
39+
) {
40+
Card(
41+
modifier = Modifier
42+
.fillMaxWidth()
43+
.padding(horizontal = 12.dp),
44+
color = MiuixTheme.colorScheme.primaryVariant,
45+
insideMargin = PaddingValues(16.dp),
46+
) {
47+
Text(
48+
color = MiuixTheme.colorScheme.onPrimary,
49+
text = "Card",
50+
fontSize = 19.sp,
51+
fontWeight = FontWeight.SemiBold
52+
)
53+
Text(
54+
color = MiuixTheme.colorScheme.onPrimaryVariant,
55+
text = "This is a Card",
56+
fontSize = 17.sp,
57+
fontWeight = FontWeight.Normal
58+
)
59+
}
60+
Row(
61+
modifier = Modifier
62+
.padding(horizontal = 12.dp),
63+
horizontalArrangement = Arrangement.spacedBy(16.dp)
64+
) {
65+
Card(
66+
modifier = Modifier.weight(1f),
67+
insideMargin = PaddingValues(16.dp),
68+
pressFeedbackType = PressFeedbackType.Sink,
69+
showIndication = true,
70+
onClick = { },
71+
content = {
72+
Text(
73+
color = MiuixTheme.colorScheme.onSurface,
74+
text = "Card",
75+
fontSize = 18.sp,
76+
fontWeight = FontWeight.Medium
77+
)
78+
Text(
79+
color = MiuixTheme.colorScheme.onSurfaceVariantSummary,
80+
text = "PressFeedback: Sink\nShowIndication: true",
81+
style = MiuixTheme.textStyles.paragraph
82+
)
83+
}
84+
)
85+
Card(
86+
modifier = Modifier.weight(1f),
87+
insideMargin = PaddingValues(16.dp),
88+
pressFeedbackType = PressFeedbackType.Tilt,
89+
content = {
90+
Text(
91+
color = MiuixTheme.colorScheme.onSurface,
92+
text = "Card",
93+
fontSize = 18.sp,
94+
fontWeight = FontWeight.Medium
95+
)
96+
Text(
97+
color = MiuixTheme.colorScheme.onSurfaceVariantSummary,
98+
text = "PressFeedback: Tilt\nShowIndication: false",
99+
style = MiuixTheme.textStyles.paragraph
100+
)
101+
}
102+
)
103+
}
104+
}
105+
}
106+
}

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

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
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.Row
6+
import androidx.compose.foundation.layout.fillMaxSize
7+
import androidx.compose.foundation.layout.fillMaxWidth
8+
import androidx.compose.foundation.layout.padding
9+
import androidx.compose.foundation.layout.widthIn
10+
import androidx.compose.runtime.Composable
11+
import androidx.compose.runtime.mutableStateOf
12+
import androidx.compose.runtime.remember
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.Checkbox
19+
20+
@Composable
21+
fun CheckboxDemo() {
22+
Box(
23+
modifier = Modifier
24+
.fillMaxSize()
25+
.background(Brush.linearGradient(listOf(Color(0xfff77062), Color(0xfffe5196)))),
26+
contentAlignment = Alignment.Center
27+
) {
28+
Column(
29+
Modifier
30+
.padding(16.dp)
31+
.widthIn(max = 600.dp)
32+
.fillMaxWidth(),
33+
verticalArrangement = Arrangement.spacedBy(16.dp),
34+
horizontalAlignment = Alignment.CenterHorizontally
35+
) {
36+
val checkbox = remember { mutableStateOf(false) }
37+
val checkboxTrue = remember { mutableStateOf(true) }
38+
Row(
39+
horizontalArrangement = Arrangement.spacedBy(32.dp),
40+
) {
41+
Checkbox(
42+
checked = checkbox.value,
43+
onCheckedChange = { checkbox.value = it }
44+
)
45+
Checkbox(
46+
checked = checkboxTrue.value,
47+
onCheckedChange = { checkboxTrue.value = it }
48+
)
49+
Checkbox(
50+
checked = false,
51+
onCheckedChange = { },
52+
enabled = false
53+
)
54+
Checkbox(
55+
checked = true,
56+
onCheckedChange = { },
57+
enabled = false
58+
)
59+
}
60+
}
61+
}
62+
}

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

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
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.runtime.getValue
11+
import androidx.compose.runtime.mutableStateOf
12+
import androidx.compose.runtime.remember
13+
import androidx.compose.runtime.setValue
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.unit.dp
19+
import top.yukonga.miuix.kmp.basic.ColorPicker
20+
import top.yukonga.miuix.kmp.basic.SliderDefaults
21+
import top.yukonga.miuix.kmp.theme.MiuixTheme
22+
23+
@Composable
24+
fun ColorPickerDemo() {
25+
Box(
26+
modifier = Modifier
27+
.fillMaxSize()
28+
.background(Brush.linearGradient(listOf(Color(0xfff77062), Color(0xfffe5196)))),
29+
contentAlignment = Alignment.Center
30+
) {
31+
Column(
32+
Modifier
33+
.padding(16.dp)
34+
.widthIn(max = 600.dp)
35+
.fillMaxWidth(),
36+
verticalArrangement = Arrangement.spacedBy(16.dp),
37+
horizontalAlignment = Alignment.CenterHorizontally
38+
) {
39+
val miuixColor = MiuixTheme.colorScheme.primary
40+
var selectedColor by remember { mutableStateOf(miuixColor) }
41+
ColorPicker(
42+
initialColor = selectedColor,
43+
onColorChanged = { selectedColor = it },
44+
hapticEffect = SliderDefaults.SliderHapticEffect.Step
45+
)
46+
}
47+
}
48+
}

0 commit comments

Comments
 (0)