Skip to content

Commit 8808fd6

Browse files
YuKongAYuKongA
committed
WIP [4/N]
1 parent 49ba33c commit 8808fd6

File tree

7 files changed

+124
-5
lines changed

7 files changed

+124
-5
lines changed

‎docs/components/navigationbar.md‎

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

77
These components are typically used in conjunction with the `Scaffold` component to maintain consistent layout and behavior across different pages in the application.
88

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

1115
```kotlin

‎docs/components/topappbar.md‎

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

55
This component is typically used in conjunction with the `Scaffold` component to maintain consistent layout and behavior across different pages in the application.
66

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

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ private data class AvailableComponent(val name: String, val id: String, val demo
4040
private val availableComponents = listOf(
4141
AvailableComponent("Surface", "surface") { SurfaceDemo() },
4242
AvailableComponent("TopAppBar", "topAppBar") { TopAppBarDemo() },
43+
AvailableComponent("NavigationBar", "navigationBar") { NavigationBarDemo() },
4344
AvailableComponent("Card", "card") { CardDemo() },
4445
AvailableComponent("Button", "button") { ButtonDemo() },
4546
AvailableComponent("IconButton", "iconButton") { IconButtonDemo() },

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

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
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.getValue
12+
import androidx.compose.runtime.mutableStateOf
13+
import androidx.compose.runtime.remember
14+
import androidx.compose.runtime.setValue
15+
import androidx.compose.ui.Alignment
16+
import androidx.compose.ui.Modifier
17+
import androidx.compose.ui.graphics.Brush
18+
import androidx.compose.ui.graphics.Color
19+
import androidx.compose.ui.unit.dp
20+
import top.yukonga.miuix.kmp.basic.FloatingNavigationBar
21+
import top.yukonga.miuix.kmp.basic.FloatingNavigationBarMode
22+
import top.yukonga.miuix.kmp.basic.NavigationBar
23+
import top.yukonga.miuix.kmp.basic.NavigationItem
24+
import top.yukonga.miuix.kmp.basic.Scaffold
25+
import top.yukonga.miuix.kmp.basic.Text
26+
import top.yukonga.miuix.kmp.icon.MiuixIcons
27+
import top.yukonga.miuix.kmp.icon.icons.useful.NavigatorSwitch
28+
import top.yukonga.miuix.kmp.icon.icons.useful.Personal
29+
import top.yukonga.miuix.kmp.icon.icons.useful.Settings
30+
import top.yukonga.miuix.kmp.theme.MiuixTheme
31+
32+
@Composable
33+
fun NavigationBarDemo() {
34+
Box(
35+
modifier = Modifier
36+
.fillMaxSize()
37+
.background(Brush.linearGradient(listOf(Color(0xfff77062), Color(0xfffe5196)))),
38+
contentAlignment = Alignment.Center
39+
) {
40+
Column(
41+
Modifier
42+
.padding(16.dp)
43+
.widthIn(max = 600.dp)
44+
.fillMaxWidth(),
45+
verticalArrangement = Arrangement.spacedBy(16.dp),
46+
horizontalAlignment = Alignment.CenterHorizontally
47+
) {
48+
Row(
49+
horizontalArrangement = Arrangement.spacedBy(16.dp)
50+
) {
51+
val pages = listOf("Home", "Profile", "Settings")
52+
val items = listOf(
53+
NavigationItem("Home", MiuixIcons.Useful.NavigatorSwitch),
54+
NavigationItem("Profile", MiuixIcons.Useful.Personal),
55+
NavigationItem("Settings", MiuixIcons.Useful.Settings)
56+
)
57+
var selectedIndex1 by remember { mutableStateOf(0) }
58+
var selectedIndex2 by remember { mutableStateOf(0) }
59+
Scaffold(
60+
modifier = Modifier.weight(0.5f),
61+
bottomBar = {
62+
NavigationBar(
63+
items = items,
64+
selected = selectedIndex1,
65+
onClick = { selectedIndex1 = it }
66+
)
67+
}
68+
) { paddingValues ->
69+
Box(
70+
modifier = Modifier
71+
.fillMaxSize()
72+
.padding(paddingValues),
73+
contentAlignment = Alignment.Center
74+
) {
75+
Text(
76+
text = "Current: ${pages[selectedIndex1]}",
77+
style = MiuixTheme.textStyles.title1
78+
)
79+
}
80+
}
81+
Scaffold(
82+
modifier = Modifier.weight(0.5f),
83+
bottomBar = {
84+
FloatingNavigationBar(
85+
items = items,
86+
selected = selectedIndex2,
87+
onClick = { selectedIndex2 = it },
88+
mode = FloatingNavigationBarMode.IconOnly // Show icons only
89+
)
90+
}
91+
) { paddingValues ->
92+
Box(
93+
modifier = Modifier
94+
.fillMaxSize()
95+
.padding(paddingValues),
96+
contentAlignment = Alignment.Center
97+
) {
98+
Text(
99+
text = "Current: ${pages[selectedIndex2]}",
100+
style = MiuixTheme.textStyles.title1
101+
)
102+
}
103+
}
104+
}
105+
}
106+
}
107+
}

‎docs/package.json‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,18 @@
22
"license": "Apache-2.0",
33
"devDependencies": {
44
"vitepress": "^1.6.3",
5-
"vue": "^3.5.13"
5+
"vue": "^3.5.16"
66
},
77
"scripts": {
88
"docs:dev": "vitepress dev --host",
99
"docs:build": "vitepress build",
1010
"docs:preview": "vitepress preview"
1111
},
1212
"dependencies": {
13-
"medium-zoom": "^1.1.0"
13+
"medium-zoom": "^1.1.1"
14+
},
15+
"resolutions": {
16+
"vite": "npm:rolldown-vite@latest"
1417
},
1518
"type": "module"
16-
}
19+
}

‎docs/zh_CN/components/navigationbar.md‎

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

77
这些组件通常与 `Scaffold` 组件结合使用，以便在应用程序的不同页面中保持一致的布局和行为。
88

9+
<div style="position: relative; max-width: 700px; height: 300px; border-radius: 10px; overflow: hidden; border: 1px solid #777;">
10+
<iframe id="demoIframe" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;" src="../../compose/index.html?id=navigationBar" title="Demo" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin"></iframe>
11+
</div>
12+
913
## 引入
1014

1115
```kotlin

‎docs/zh_CN/components/topappbar.md‎

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

55
此组件通常与 `Scaffold` 组件结合使用，以便在应用程序的不同页面中保持一致的布局和行为。
66

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

0 commit comments

Comments
 (0)