Skip to content

Commit abe2c43

Browse files
YuKongAYuKongA
committed
WIP 15
1 parent 2d88b09 commit abe2c43

File tree

11 files changed

+822
-123
lines changed

11 files changed

+822
-123
lines changed

‎docs/.vitepress/config.mts‎

Lines changed: 13 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,13 @@ export default defineConfig({
9898
}
9999
],
100100
'/components/': [
101+
{
102+
text: '组件库',
103+
collapsed: false,
104+
items: [
105+
{ text: '总览', link: '/components/' },
106+
]
107+
},
101108
{
102109
text: '脚手架',
103110
collapsed: false,
@@ -110,60 +117,24 @@ export default defineConfig({
110117
collapsed: false,
111118
items: [
112119
{ text: 'Surface', link: '/components/surface' },
120+
{ text: 'TopAppBar', link: '/components/topappbar' },
121+
{ text: 'NavigationBar', link: '/components/navigationbar' },
122+
{ text: 'TabRow', link: '/components/tabrow' },
123+
{ text: 'Card', link: '/components/card' },
113124
{ text: 'BasicComponent', link: '/components/basiccomponent' },
114125
{ text: 'Button', link: '/components/button' },
115126
{ text: 'Text', link: '/components/text' },
116127
{ text: 'SmallTitle', link: '/components/smalltitle' },
117128
{ text: 'TextField', link: '/components/textfield' },
118129
{ text: 'Switch', link: '/components/switch' },
119130
{ text: 'Checkbox', link: '/components/checkbox' },
131+
{ text: 'Slider', link: '/components/slider' },
132+
{ text: 'ProgressIndicator', link: '/components/progressindicator' },
120133
{ text: 'Icon', link: '/components/icon' },
121134
{ text: 'FloatingActionButton', link: '/components/floatingactionbutton' },
122135
{ text: 'Divider', link: '/components/divider' },
123-
]
124-
},
125-
{
126-
text: '容器组件',
127-
collapsed: false,
128-
items: [
129-
{ text: 'Card', link: '/components/card' },
130-
]
131-
},
132-
{
133-
text: '导航组件',
134-
collapsed: false,
135-
items: [
136-
{ text: 'TopAppBar', link: '/components/topappbar' },
137-
{ text: 'NavigationBar', link: '/components/navigationbar' },
138-
{ text: 'TabRow', link: '/components/tabrow' },
139-
]
140-
},
141-
{
142-
text: '反馈组件',
143-
collapsed: false,
144-
items: [
145-
{ text: 'Slider', link: '/components/slider' },
146-
{ text: 'ProgressIndicator', link: '/components/progress' },
147-
]
148-
},
149-
{
150-
text: '刷新组件',
151-
collapsed: false,
152-
items: [
153136
{ text: 'PullToRefresh', link: '/components/pulltorefresh' },
154-
]
155-
},
156-
{
157-
text: '搜索组件',
158-
collapsed: false,
159-
items: [
160137
{ text: 'SearchBar', link: '/components/searchview' },
161-
]
162-
},
163-
{
164-
text: '取色组件',
165-
collapsed: false,
166-
items: [
167138
{ text: 'ColorPicker', link: '/components/colorpicker' },
168139
]
169140
},

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

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,21 @@
11
:root {
22

3+
/* 亮色模式搜索框颜色 */
4+
--miuix-color-search-button: rgba(255, 255, 255, 0.5);
5+
36
/* 首页下滑后导航透明 */
47
.VPNavBar:not(.has-sidebar):not(.home.top) {
58
background-color: rgba(255, 255, 255, 0);
6-
backdrop-filter: blur(10px);
9+
backdrop-filter: blur(15px)
710
}
811

912
/* 搜索框透明 */
1013
.DocSearch-Button {
11-
background-color: rgba(255, 255, 255, 0);
12-
backdrop-filter: blur(10px);
14+
background-color: var(--miuix-color-search-button);
15+
backdrop-filter: blur(15px)
1316
}
1417

15-
/* Feature透明 */
18+
/* Feature 透明 */
1619
.VPFeature {
1720
border: none;
1821
box-shadow: 0 10px 30px 0 rgb(0 0 0 / 15%);
@@ -22,22 +25,27 @@
2225
/* 文档页侧边栏顶部透明 */
2326
.curtain {
2427
background-color: rgba(255, 255, 255, 0);
25-
backdrop-filter: blur(10px);
28+
backdrop-filter: blur(15px)
2629
}
2730

2831
@media (min-width: 960px) {
2932

3033
/* 文档页导航中间透明 */
3134
.VPNavBar:not(.home.top) .content-body {
3235
background-color: rgba(255, 255, 255, 0);
33-
backdrop-filter: blur(10px);
36+
backdrop-filter: blur(15px)
3437
}
3538
}
3639

3740
/* 移动端大纲栏透明 */
3841
.VPLocalNav {
3942
background-color: rgba(255, 255, 255, 0);
40-
backdrop-filter: blur(10px);
43+
backdrop-filter: blur(15px)
4144
}
45+
}
46+
4247

48+
.dark {
49+
/* 深色模式搜索框颜色 */
50+
--miuix-color-search-button: rgba(0, 0, 0, 0.2);
4351
}

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,8 @@
3838
/* mediumZoom 样式 */
3939
.medium-zoom-overlay {
4040
z-index: 30;
41-
}
42-
43-
.medium-zoom-image {
41+
}
42+
43+
.medium-zoom-image {
4444
z-index: 9999 !important;
45-
}
45+
}

‎docs/components/button.md‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -171,8 +171,7 @@ Button(
171171
visible = isLoading
172172
) {
173173
CircularProgressIndicator(
174-
modifier = Modifier
175-
.padding(end = 8.dp),
174+
modifier = Modifier.padding(end = 8.dp),
176175
size = 20.dp,
177176
strokeWidth = 4.dp
178177
)

‎docs/components/floatingactionbutton.md‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
`FloatingActionButton` 是 Miuix 中的悬浮按钮组件，通常用于展示页面中最重要或最常用的操作。它通常悬浮在界面上方，具有突出的视觉效果，便于用户快速访问。
44

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

77
## 引入
88

@@ -101,10 +101,14 @@ Scaffold(
101101
}
102102
},
103103
floatingActionButtonPosition = MiuixFabPosition.End
104-
) { innerPadding ->
105-
// 页面内容
106-
Box(modifier = Modifier.padding(innerPadding)) {
107-
// ...
104+
) { paddingValues ->
105+
// 内容区域需要考虑 padding
106+
Box(
107+
modifier = Modifier
108+
.fillMaxSize()
109+
.padding(paddingValues)
110+
) {
111+
// ...
108112
}
109113
}
110114
```

‎docs/components/index.md‎

Lines changed: 34 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -2,68 +2,44 @@
22

33
Miuix 提供了丰富的 UI 组件，严格遵循 Xiaomi HyperOS 设计规范。每个组件都经过精心设计，确保视觉与交互效果与小米原生体验一致。
44

5-
## 基础组件
5+
## 脚手架
66

7-
| 组件 | 描述 | 常见用途 |
8-
| -------------------------------------------------------- | ---------------------- | ------------------------- |
9-
| [Surface](/components/surface) | 基础容器组件 | 内容展示、背景容器 |
10-
| [BasicComponent](/components/basiccomponent) | 通用基础组件 | 自定义组件开发 |
11-
| [Button](/components/button) | 触发操作的交互元素 | 表单提交、操作确认 |
12-
| [Text](/components/text) | 展示各种样式的文字内容 | 标题、正文、描述文本 |
13-
| [SmallTitle](/components/smalltitle) | 小型标题组件 | 辅助标题、分类标识 |
14-
| [TextField](/components/textfield) | 接收用户文本输入 | 表单填写、搜索框 |
15-
| [Switch](/components/switch) | 双态切换控件 | 设置项开关、功能启用/禁用 |
16-
| [Checkbox](/components/checkbox) | 多选控件 | 多项选择、条款同意 |
17-
| [Icon](/components/icon) | 图标展示组件 | 图标按钮、状态指示 |
18-
| [FloatingActionButton](/components/floatingactionbutton) | 悬浮操作按钮 | 主要操作、快捷功能 |
19-
| [Divider](/components/divider) | 内容分隔线 | 区块分隔、层次划分 |
20-
21-
## 容器组件
22-
23-
| 组件 | 描述 | 常见用途 |
24-
| ------------------------ | ------------------ | ------------------ |
25-
| [Card](/components/card) | 包含相关信息的容器 | 信息展示、内容分组 |
7+
| 组件 | 描述 | 常见用途 |
8+
| -------------------------------- | -------------- | ------------------ |
9+
| [Scaffold](/components/scaffold) | 应用的基础布局 | 页面结构、内容展示 |
2610

2711
## 导航组件
2812

29-
| 组件 | 描述 | 常见用途 |
30-
| ------------------------------------------ | ---------------- | ------------------ |
31-
| [TopAppBar](/components/topappbar) | 应用顶部的导航栏 | 页面标题、主要操作 |
32-
| [NavigationBar](/components/navigationbar) | 底部导航组件 | 主要页面切换 |
33-
| [TabRow](/components/tabrow) | 水平标签页切换栏 | 内容分类浏览 |
34-
35-
## 反馈组件
36-
37-
| 组件 | 描述 | 常见用途 |
38-
| ----------------------------------------- | ---------------- | ------------------ |
39-
| [Slider](/components/slider) | 调节值的滑动控件 | 音量调节、范围选择 |
40-
| [ProgressIndicator](/components/progress) | 展示操作进度状态 | 加载中、进度展示 |
41-
42-
## 刷新组件
43-
44-
| 组件 | 描述 | 常见用途 |
45-
| ------------------------------------------ | ---------------- | ------------------ |
46-
| [PullToRefresh](/components/pulltorefresh) | 下拉触发刷新操作 | 数据更新、页面刷新 |
47-
48-
## 搜索组件
49-
50-
| 组件 | 描述 | 常见用途 |
51-
| ---------------------------------- | ---------------- | ------------------ |
52-
| [SearchBar](/components/searchbar) | 执行搜索的输入框 | 内容搜索、快速查找 |
53-
54-
## 取色组件
55-
56-
| 组件 | 描述 | 常见用途 |
57-
| -------------------------------------- | -------------- | ------------------ |
58-
| [ColorPicker](/components/colorpicker) | 选择颜色的控件 | 主题设置、颜色选择 |
13+
| 组件 | 描述 | 常见用途 |
14+
| -------------------------------------------------------- | ---------------------- | -------------------- |
15+
| [Surface](/components/surface) | 基础容器组件 | 内容展示、背景容器 |
16+
| [TopAppBar](/components/topappbar) | 应用顶部的导航栏 | 页面标题、主要操作 |
17+
| [NavigationBar](/components/navigationbar) | 底部导航组件 | 主要页面切换 |
18+
| [TabRow](/components/tabrow) | 水平标签页切换栏 | 内容分类浏览 |
19+
| [Card](/components/card) | 包含相关信息的容器 | 信息展示、内容分组 |
20+
| [BasicComponent](/components/basiccomponent) | 通用基础组件 | 自定义组件开发 |
21+
| [Button](/components/button) | 触发操作的交互元素 | 表单提交、操作确认 |
22+
| [Text](/components/text) | 展示各种样式的文字内容 | 标题、正文、描述文本 |
23+
| [SmallTitle](/components/smalltitle) | 小型标题组件 | 辅助标题、分类标识 |
24+
| [TextField](/components/textfield) | 接收用户文本输入 | 表单填写、搜索框 |
25+
| [Switch](/components/switch) | 双态切换控件 | 设置项开关、功能启用 |
26+
| [Checkbox](/components/checkbox) | 多选控件 | 多项选择、条款同意 |
27+
| [Slider](/components/slider) | 调节值的滑动控件 | 音量调节、范围选择 |
28+
| [ProgressIndicator](/components/progress) | 展示操作进度状态 | 加载中、进度展示 |
29+
| [Icon](/components/icon) | 图标展示组件 | 图标按钮、状态指示 |
30+
| [FloatingActionButton](/components/floatingactionbutton) | 悬浮操作按钮 | 主要操作、快捷功能 |
31+
| [Divider](/components/divider) | 内容分隔线 | 区块分隔、层次划分 |
32+
| [PullToRefresh](/components/pulltorefresh) | 下拉触发刷新操作 | 数据更新、页面刷新 |
33+
| [SearchBar](/components/searchbar) | 执行搜索的输入框 | 内容搜索、快速查找 |
34+
| [ColorPicker](/components/colorpicker) | 选择颜色的控件 | 主题设置、颜色选择 |
5935

6036
## 扩展组件
6137

62-
| 组件 | 描述 | 常见用途 |
63-
| ------------------------------------------ | ---------------------------------- | -------------------------- |
64-
| [SuperArrow](/components/superarrow) | 基于 BasicComponent 的带箭头组件 | 指示可点击、导航提示 |
65-
| [SuperSwitch](/components/superswitch) | 基于 BasicComponent 的开关组件 | 设置项开关、功能启用/禁用 |
66-
| [SuperCheckBox](/components/supercheckbox) | 基于 BasicComponent 的复选框组件 | 多项选择、条款同意 |
67-
| [SuperDropdown](/components/superdropdown) | 基于 BasicComponent 的下拉菜单组件 | 选项选择、功能列表 |
68-
| [SuperSpinner](/components/superspinner) | 基于 BasicComponent 的高级菜单组件 | 复杂选项选择、复杂功能列表 |
69-
| [SuperDialog](/components/superdialog) | 基于 BasicComponent 的对话弹窗组件 | 提示、确认操作 |
38+
| 组件 | 描述 | 常见用途 |
39+
| ------------------------------------------ | ---------------------------------- | ---------------------- |
40+
| [SuperArrow](/components/superarrow) | 基于 BasicComponent 的带箭头组件 | 指示可点击、导航提示 |
41+
| [SuperSwitch](/components/superswitch) | 基于 BasicComponent 的开关组件 | 设置项开关、功能启用 |
42+
| [SuperCheckBox](/components/supercheckbox) | 基于 BasicComponent 的复选框组件 | 多项选择、条款同意 |
43+
| [SuperDropdown](/components/superdropdown) | 基于 BasicComponent 的下拉菜单组件 | 选项选择、功能列表 |
44+
| [SuperSpinner](/components/superspinner) | 基于 BasicComponent 的高级菜单组件 | 进阶选项选择、功能列表 |
45+
| [SuperDialog](/components/superdialog) | 基于 BasicComponent 的对话弹窗组件 | 提示、确认操作 |

0 commit comments

Comments
 (0)