Skip to content

Commit 45d5eb6

Browse files
YuKongAYuKongA
committed
WIP 10
* https://vitepress.yiov.top/style.html#%E4%B8%BB%E9%A2%98%E7%BE%8E%E5%8C%96
1 parent c7122a2 commit 45d5eb6

File tree

7 files changed

+287
-0
lines changed

7 files changed

+287
-0
lines changed

‎docs/.vitepress/config.mts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,38 @@ import { defineConfig } from 'vitepress'
22

33
export default defineConfig({
44
title: "Miuix",
5+
head: [
6+
['link', { rel: 'icon', href: '/Icon.webp' }],
7+
['link', { rel: 'preconnect', href: 'https://cdn-font.hyperos.mi.com/font/css?family=MiSans_VF:VF:Chinese_Simplify,Latin&display=swap' }],
8+
],
9+
510
description: "A UI library for Compose MultiPlatform",
611
lastUpdated: true,
712
lang: 'zh-Hans',
813
themeConfig: {
914
logo: '/Icon.webp',
1015

16+
search: {
17+
provider: 'local',
18+
options: {
19+
translations: {
20+
button: {
21+
buttonText: '搜索文档',
22+
buttonAriaLabel: '搜索文档'
23+
},
24+
modal: {
25+
noResultsText: '无法找到相关结果',
26+
resetButtonTitle: '清除查询条件',
27+
footer: {
28+
selectText: '选择',
29+
navigateText: '切换',
30+
closeText: '关闭',
31+
},
32+
},
33+
},
34+
},
35+
},
36+
1137
docFooter: {
1238
prev: '上一页',
1339
next: '下一页'

‎docs/.vitepress/theme/index.mts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import DefaultTheme from 'vitepress/theme'
2+
import './style/index.css'
3+
4+
export default {
5+
extends: DefaultTheme,
6+
}

‎docs/.vitepress/theme/style/blur.css‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
:root {
2+
3+
/* 首页下滑后导航透明 */
4+
.VPNavBar:not(.has-sidebar):not(.home.top) {
5+
background-color: rgba(255, 255, 255, 0);
6+
backdrop-filter: blur(10px);
7+
}
8+
9+
/* 搜索框透明 */
10+
.DocSearch-Button {
11+
background-color: rgba(255, 255, 255, 0);
12+
backdrop-filter: blur(10px);
13+
}
14+
15+
/* Feature透明 */
16+
.VPFeature {
17+
border: none;
18+
box-shadow: 0 10px 30px 0 rgb(0 0 0 / 15%);
19+
background-color: transparent;
20+
}
21+
22+
/* 文档页侧边栏顶部透明 */
23+
.curtain {
24+
background-color: rgba(255, 255, 255, 0);
25+
backdrop-filter: blur(10px);
26+
}
27+
28+
@media (min-width: 960px) {
29+
30+
/* 文档页导航中间透明 */
31+
.VPNavBar:not(.home.top) .content-body {
32+
background-color: rgba(255, 255, 255, 0);
33+
backdrop-filter: blur(10px);
34+
}
35+
}
36+
37+
/* 移动端大纲栏透明 */
38+
.VPLocalNav {
39+
background-color: rgba(255, 255, 255, 0);
40+
backdrop-filter: blur(10px);
41+
}
42+
43+
}

‎docs/.vitepress/theme/style/hidden.css‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
:root {
2+
3+
/* 文档页Logo出文字下横条 */
4+
@media (min-width: 960px) {
5+
.VPNavBarTitle.has-sidebar .title {
6+
border-bottom-color: transparent;
7+
}
8+
}
9+
10+
/* 页脚横条隐藏
11+
.VPFooter {
12+
border-top: none;
13+
} */
14+
15+
/* 手机端菜单栏顶部横条隐藏 */
16+
.VPNavBar.screen-open {
17+
border-bottom: none;
18+
}
19+
20+
/* 手机端菜单栏菜单分割线隐藏 */
21+
.VPNavScreenMenuLink {
22+
border-bottom: none;
23+
}
24+
25+
/* 手机端菜单组隐藏 */
26+
.VPNavScreenMenuGroup {
27+
border-bottom: none;
28+
}
29+
30+
/* 手机端大纲栏横条隐藏 */
31+
.VPLocalNav {
32+
border-bottom: none;
33+
}
34+
35+
}
36+
37+
38+
/* 导航栏下划线隐藏 */
39+
.divider {
40+
display: none;
41+
}

‎docs/.vitepress/theme/style/index.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@import './var.css';
2+
@import './blur.css';
3+
@import './hidden.css';

‎docs/.vitepress/theme/style/var.css‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
:root {
2+
/* hero 标题渐变色 */
3+
--vp-home-hero-name-color: transparent;
4+
--vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe, #41d1ff);
5+
6+
/*hero logo 背 景渐变色 */
7+
--vp-home-hero-image-background-image: linear-gradient(-45deg, #bd34fe 50%, #47caff 50%);
8+
--vp-home-hero-image-filter: blur(40px);
9+
}
10+
11+
.VPDoc h1 {
12+
background: -webkit-linear-gradient(10deg, #bd34fe 5%, #e43498 15%);
13+
background-clip: text;
14+
-webkit-background-clip: text;
15+
-webkit-text-fill-color: transparent;
16+
}

‎docs/components/topappbar.md‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
# TopAppBar
2+
3+
`TopAppBar` 是 Miuix 中的顶部应用栏组件，用于在界面顶部提供导航、标题和操作按钮。支持大标题模式和普通模式，以及滚动时的动态效果。
4+
5+
此组件常常与 `Scaffold` 组件结合使用，以便在应用程序的不同页面中保持一致的布局和行为。
6+
7+
## 引入
8+
9+
```kotlin
10+
import top.yukonga.miuix.kmp.basic.TopAppBar
11+
import top.yukonga.miuix.kmp.basic.SmallTopAppBar
12+
import top.yukonga.miuix.kmp.basic.MiuixScrollBehavior
13+
import top.yukonga.miuix.kmp.basic.rememberTopAppBarState
14+
```
15+
16+
## 基本用法
17+
18+
### 小标题顶部栏
19+
20+
```kotlin
21+
SmallTopAppBar(
22+
title = "标题",
23+
navigationIcon = {
24+
IconButton(onClick = { /* 处理点击事件 */ }) {
25+
Icon(MiuixIcons.Useful.Back, contentDescription = "返回")
26+
}
27+
},
28+
actions = {
29+
IconButton(onClick = { /* 处理点击事件 */ }) {
30+
Icon(MiuixIcons.Useful.More, contentDescription = "更多")
31+
}
32+
}
33+
)
34+
```
35+
36+
### 大标题顶部栏
37+
38+
```kotlin
39+
TopAppBar(
40+
title = "标题",
41+
largeTitle = "大标题", // 如果不指定，将使用 title 的值
42+
navigationIcon = {
43+
IconButton(onClick = { /* 处理点击事件 */ }) {
44+
Icon(MiuixIcons.Base.ArrowLeft, contentDescription = "返回")
45+
}
46+
},
47+
actions = {
48+
IconButton(onClick = { /* 处理点击事件 */ }) {
49+
Icon(MiuixIcons.Useful.More, contentDescription = "更多")
50+
}
51+
}
52+
)
53+
```
54+
55+
## 滚动行为
56+
57+
TopAppBar 支持随内容滚动时改变其显示状态：
58+
59+
```kotlin
60+
val scrollBehavior = MiuixScrollBehavior()
61+
Scaffold(
62+
topBar = {
63+
TopAppBar(
64+
title = "标题",
65+
largeTitle = "大标题",
66+
scrollBehavior = scrollBehavior
67+
)
68+
}
69+
) { paddingValues ->
70+
LazyColumn(
71+
modifier = Modifier
72+
.fillMaxSize()
73+
.padding(paddingValues),
74+
contentPadding = PaddingValues(top = paddingValues.calculateTopPadding()),
75+
topAppBarScrollBehavior = scrollBehavior
76+
) {
77+
// 列表内容
78+
}
79+
}
80+
```
81+
82+
## 自定义样式
83+
84+
### 自定义颜色
85+
86+
```kotlin
87+
TopAppBar(
88+
title = "标题",
89+
color = MiuixTheme.colorScheme.primary
90+
)
91+
```
92+
93+
### 自定义内容边距
94+
95+
```kotlin
96+
TopAppBar(
97+
title = "标题",
98+
horizontalPadding = 32.dp
99+
)
100+
```
101+
102+
## 属性
103+
104+
### TopAppBar 属性
105+
106+
| 属性名 | 类型 | 默认值 | 说明 |
107+
| -------------------------- | ------------------------------- | --------------------------------- | ------------------------------ |
108+
| title | String | - | 顶部栏标题 |
109+
| modifier | Modifier | Modifier | 应用于顶部栏的修饰符 |
110+
| color | Color | MiuixTheme.colorScheme.background | 顶部栏背景颜色 |
111+
| largeTitle | String? | null | 大标题文本，不指定时使用 title |
112+
| navigationIcon | @Composable () -> Unit | {} | 导航图标区域的可组合函数 |
113+
| actions | @Composable RowScope.() -> Unit | {} | 操作按钮区域的可组合函数 |
114+
| scrollBehavior | ScrollBehavior? | null | 控制顶部栏滚动行为 |
115+
| defaultWindowInsetsPadding | Boolean | true | 是否应用默认窗口边距 |
116+
| horizontalPadding | Dp | 26.dp | 水平内容边距 |
117+
118+
### SmallTopAppBar 属性
119+
120+
| 属性名 | 类型 | 默认值 | 说明 |
121+
| -------------------------- | ------------------------------- | --------------------------------- | ------------------------ |
122+
| title | String | - | 顶部栏标题 |
123+
| modifier | Modifier | Modifier | 应用于顶部栏的修饰符 |
124+
| color | Color | MiuixTheme.colorScheme.background | 顶部栏背景颜色 |
125+
| navigationIcon | @Composable () -> Unit | {} | 导航图标区域的可组合函数 |
126+
| actions | @Composable RowScope.() -> Unit | {} | 操作按钮区域的可组合函数 |
127+
| scrollBehavior | ScrollBehavior? | null | 控制顶部栏滚动行为 |
128+
| defaultWindowInsetsPadding | Boolean | true | 是否应用默认窗口边距 |
129+
| horizontalPadding | Dp | 26.dp | 水平内容边距 |
130+
131+
### ScrollBehavior
132+
133+
MiuixScrollBehavior 是用于控制顶部栏滚动行为的配置对象。
134+
135+
#### rememberTopAppBarState
136+
137+
用于创建和记住 TopAppBarState：
138+
139+
```kotlin
140+
val scrollBehavior = MiuixScrollBehavior(
141+
state = rememberTopAppBarState(),
142+
snapAnimationSpec = spring(stiffness = 3000f),
143+
canScroll = { true }
144+
)
145+
```
146+
147+
| 参数名 | 类型 | 默认值 | 说明 |
148+
| ------------------ | --------------------------- | -------------------------- | -------------------------- |
149+
| state | TopAppBarState | rememberTopAppBarState() | 控制滚动状态的状态对象 |
150+
| canScroll | () -> Boolean | { true } | 控制是否允许滚动的回调 |
151+
| snapAnimationSpec | AnimationSpec\<Float>? | spring(stiffness = 3000f) | 定义顶部栏滚动后的吸附动画 |
152+
| flingAnimationSpec | DecayAnimationSpec\<Float>? | rememberSplineBasedDecay() | 定义顶部栏滑动的衰减动画 |

0 commit comments

Comments
 (0)