Skip to content

Commit e64b48d

Browse files
YuKongAYuKongA
committed
WIP 2
1 parent 2d20692 commit e64b48d

File tree

7 files changed

+131
-205
lines changed

7 files changed

+131
-205
lines changed

‎docs/.vitepress/config.mts‎

Lines changed: 43 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
11
import { defineConfig } from 'vitepress'
22

3-
// https://vitepress.dev/reference/site-config
43
export default defineConfig({
54
title: "Miuix",
65
description: "A UI library for Compose MultiPlatform",
6+
lastUpdated: true,
77
themeConfig: {
8-
// https://vitepress.dev/reference/default-theme-config
9-
logo: 'public/Icon.webp',
10-
8+
logo: '/Icon.webp',
9+
1110
nav: [
1211
{ text: '首页', link: '/' },
13-
{ text: '指南', link: '/guide/getting-started' },
14-
{ text: '组件', link: '/components/' },
12+
{ text: '快速开始', link: '/guide/getting-started' },
13+
{ text: '组件库', link: '/components/' },
1514
],
1615

1716
sidebar: {
@@ -31,37 +30,62 @@ export default defineConfig({
3130
}
3231
],
3332
'/components/': [
33+
{
34+
text: '脚手架',
35+
items: [
36+
{ text: 'Scaffold', link: '/components/scaffold' },
37+
]
38+
},
3439
{
3540
text: '基础组件',
3641
items: [
37-
{ text: 'Button 按钮', link: '/components/button' },
38-
{ text: 'Text 文本', link: '/components/text' },
39-
{ text: 'TextField 输入框', link: '/components/textfield' },
40-
{ text: 'Switch 开关', link: '/components/switch' },
41-
{ text: 'Checkbox 复选框', link: '/components/checkbox' },
42+
{ text: 'Surface', link: '/components/surface' },
43+
{ text: 'BasicComponent', link: '/components/component' },
44+
{ text: 'Button', link: '/components/button' },
45+
{ text: 'Text', link: '/components/text' },
46+
{ text: 'SmallTitle', link: '/components/smalltitle' },
47+
{ text: 'TextField', link: '/components/textfield' },
48+
{ text: 'Switch', link: '/components/switch' },
49+
{ text: 'Checkbox', link: '/components/checkbox' },
50+
{ text: 'Icon', link: '/components/icon' },
51+
{ text: 'FloatingActionButton', link: '/components/floatingactionbutton' },
52+
{ text: 'Divider', link: '/components/divider' },
4253
]
4354
},
4455
{
4556
text: '容器组件',
4657
items: [
47-
{ text: 'Card 卡片', link: '/components/card' },
48-
{ text: 'Dialog 对话框', link: '/components/dialog' },
49-
{ text: 'BottomSheet 底部表单', link: '/components/bottomsheet' },
58+
{ text: 'Card', link: '/components/card' },
59+
{ text: 'Dialog', link: '/components/dialog' },
60+
{ text: 'ListPopup', link: '/components/listpopup' },
5061
]
5162
},
5263
{
5364
text: '导航组件',
5465
items: [
55-
{ text: 'TopAppBar 顶栏', link: '/components/topappbar' },
56-
{ text: 'NavigationBar 导航栏', link: '/components/navigationbar' },
57-
{ text: 'TabRow 标签栏', link: '/components/tabrow' },
66+
{ text: 'TopAppBar', link: '/components/topappbar' },
67+
{ text: 'NavigationBar', link: '/components/navigationbar' },
68+
{ text: 'TabRow', link: '/components/tabrow' },
5869
]
5970
},
6071
{
6172
text: '反馈组件',
6273
items: [
63-
{ text: 'ProgressIndicator 进度指示器', link: '/components/progress' },
64-
{ text: 'Snackbar 提示条', link: '/components/snackbar' },
74+
{ text: 'Slider', link: '/components/slider' },
75+
{ text: 'ProgressIndicator', link: '/components/progress' },
76+
]
77+
},
78+
{
79+
text: '刷新组件',
80+
items: [
81+
{ text: 'PullToRefresh', link: '/components/pulltorefresh' },
82+
]
83+
},
84+
{
85+
text: '其他组件',
86+
items: [
87+
{ text: 'ColorPicker', link: '/components/colorpicker' },
88+
{ text: 'SearchBar', link: '/components/searchbar' },
6589
]
6690
}
6791
]

‎docs/components/index.md‎

Lines changed: 36 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -4,94 +4,52 @@ Miuix 提供了丰富的 UI 组件，严格遵循 Xiaomi HyperOS 设计规范。
44

55
## 基础组件
66

7-
| 组件 | 描述 | 常见用途 |
8-
| --- | --- | --- |
9-
| [Button 按钮](/components/button) | 触发操作的交互元素 | 表单提交、操作确认 |
10-
| [Text 文本](/components/text) | 展示各种样式的文字内容 | 标题、正文、描述文本 |
11-
| [TextField 输入框](/components/textfield) | 接收用户文本输入 | 表单填写、搜索框 |
12-
| [Switch 开关](/components/switch) | 双态切换控件 | 设置项开关、功能启用/禁用 |
13-
| [Checkbox 复选框](/components/checkbox) | 多选控件 | 多项选择、条款同意 |
7+
| 组件 | 描述 | 常见用途 |
8+
| ----------------------------------------------------------------- | ---------------------- | ------------------------- |
9+
| [Surface](/components/surface) | 基础容器组件 | 内容展示、背景容器 |
10+
| [BasicComponent](/components/component) | 通用基础组件 | 自定义组件开发 |
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) | 内容分隔线 | 区块分隔、层次划分 |
1420

1521
## 容器组件
1622

17-
| 组件 | 描述 | 常见用途 |
18-
| --- | --- | --- |
19-
| [Card 卡片](/components/card) | 包含相关信息的容器 | 信息展示、内容分组 |
20-
| [Dialog 对话框](/components/dialog) | 模态弹窗 | 重要提示、操作确认 |
21-
| [BottomSheet 底部表单](/components/bottomsheet) | 从屏幕底部弹出的面板 | 选项菜单、补充信息 |
23+
| 组件 | 描述 | 常见用途 |
24+
| ------------------------------------------- | ------------------ | ------------------ |
25+
| [Card](/components/card) | 包含相关信息的容器 | 信息展示、内容分组 |
26+
| [Dialog](/components/dialog) | 模态弹窗 | 重要提示、操作确认 |
27+
| [ListPopup](/components/listpopup) | 弹出的列表选择框 | 选项选择、快捷操作 |
2228

2329
## 导航组件
2430

25-
| 组件 | 描述 | 常见用途 |
26-
| --- | --- | --- |
27-
| [TopAppBar 顶栏](/components/topappbar) | 应用顶部的导航栏 | 页面标题、主要操作 |
28-
| [NavigationBar 导航栏](/components/navigationbar) | 底部导航组件 | 主要页面切换 |
29-
| [TabRow 标签栏](/components/tabrow) | 水平标签页切换栏 | 内容分类浏览 |
31+
| 组件 | 描述 | 常见用途 |
32+
| ------------------------------------------------- | ---------------- | ------------------ |
33+
| [TopAppBar](/components/topappbar) | 应用顶部的导航栏 | 页面标题、主要操作 |
34+
| [NavigationBar](/components/navigationbar) | 底部导航组件 | 主要页面切换 |
35+
| [TabRow](/components/tabrow) | 水平标签页切换栏 | 内容分类浏览 |
3036

3137
## 反馈组件
3238

33-
| 组件 | 描述 | 常见用途 |
34-
| --- | --- | --- |
35-
| [ProgressIndicator 进度指示器](/components/progress) | 展示操作进度状态 | 加载中、进度展示 |
36-
| [Snackbar 提示条](/components/snackbar) | 临时性反馈信息 | 操作确认、轻量提示 |
39+
| 组件 | 描述 | 常见用途 |
40+
| ---------------------------------------------------- | ---------------- | ------------------ |
41+
| [Slider](/components/slider) | 调节值的滑动控件 | 音量调节、范围选择 |
42+
| [ProgressIndicator](/components/progress) | 展示操作进度状态 | 加载中、进度展示 |
3743

38-
## 组件用法示例
44+
## 刷新组件
3945

40-
以下是 MiuixButton 的基本使用示例：
46+
| 组件 | 描述 | 常见用途 |
47+
| --------------------------------------------------- | ---------------- | ------------------ |
48+
| [PullToRefresh](/components/pulltorefresh) | 下拉触发刷新操作 | 数据更新、页面刷新 |
4149

42-
```kotlin
43-
import androidx.compose.runtime.Composable
44-
import androidx.compose.ui.tooling.preview.Preview
45-
import top.yukonga.miuix.kmp.components.MiuixButton
46-
import top.yukonga.miuix.kmp.components.MiuixButtonStyle
47-
import top.yukonga.miuix.kmp.theme.MiuixTheme
50+
## 其他组件
4851

49-
@Composable
50-
fun ButtonExample() {
51-
MiuixTheme {
52-
Column(
53-
verticalArrangement = Arrangement.spacedBy(12.dp),
54-
modifier = Modifier.padding(16.dp)
55-
) {
56-
// 默认按钮
57-
MiuixButton(
58-
onClick = { /* 处理点击 */ }
59-
) {
60-
Text("默认按钮")
61-
}
62-
63-
// 强调按钮
64-
MiuixButton(
65-
onClick = { /* 处理点击 */ },
66-
style = MiuixButtonStyle.Emphasized
67-
) {
68-
Text("强调按钮")
69-
}
70-
71-
// 辅助按钮
72-
MiuixButton(
73-
onClick = { /* 处理点击 */ },
74-
style = MiuixButtonStyle.Secondary
75-
) {
76-
Text("辅助按钮")
77-
}
78-
79-
// 图标按钮
80-
MiuixButton(
81-
onClick = { /* 处理点击 */ },
82-
leadingIcon = Icons.Rounded.Add
83-
) {
84-
Text("图标按钮")
85-
}
86-
}
87-
}
88-
}
89-
90-
@Preview
91-
@Composable
92-
fun ButtonPreview() {
93-
ButtonExample()
94-
}
95-
```
96-
97-
每个组件页面都包含详细的参数说明、可定制选项和多个使用示例，帮助您快速上手。
52+
| 组件 | 描述 | 常见用途 |
53+
| ------------------------------------------------- | -------------- | ------------------ |
54+
| [ColorPicker](/components/colorpicker) | 选择颜色的控件 | 主题设置、颜色选择 |
55+
| [SearchBar](/components/searchbar) | 搜索输入框 | 内容搜索、快速查找 |

‎docs/guide/best-practices.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# 最佳实践

‎docs/guide/getting-started.md‎

Lines changed: 48 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,53 @@
11

2-
# 提前须知
3-
>此库处于实验阶段，API 可能会在未来版本中变更而不另行通知
42

5-
当前支持的平台: **Android** / **Desktop(JVM)** / **iOS** / **WasmJs** / **Js** / **macOS(Native)**
3+
# 快速开始
64

7-
[![License](https://img.shields.io/github/license/miuix-kotlin-multiplatform/miuix)](https://github.com/miuix-kotlin-multiplatform/miuix/blob/main/LICENSE)
5+
## 使用须知
86

9-
# 快速开始
7+
当前支持的平台: **Android** / **Desktop(JVM)** / **iOS** / **WasmJs** / **Js** / **macOS(Native)**
8+
9+
::: warning 注意
10+
此库处于实验阶段，API 可能会在未来版本中变更而不另行通知
11+
:::
1012

1113
## 添加依赖
1214

13-
要在您的 Compose Multiplatform 项目中使用 Miuix，请按照以下步骤添加依赖：
15+
要在您的项目中使用 Miuix，请按照以下步骤添加依赖：
1416

1517
### Gradle (Kotlin DSL)
1618

17-
Maven Central 当前版本
18-
[![Maven Central](https://img.shields.io/maven-central/v/top.yukonga.miuix.kmp/miuix)](https://search.maven.org/search?q=g:top.yukonga.miuix.kmp)
19-
20-
在根目录的 settings.gradle.kts
19+
1. 在根目录的 settings.gradle.kts 添加（正常情况应已包含）：
2120
```kotlin
2221
repositories {
2322
mavenCentral()
2423
}
2524
```
2625

27-
在 Compose Multiplatform 项目目录的 build.gradle.kts 中
26+
2. 检查 Maven Central 当前最新版本：
27+
[![Maven Central](https://img.shields.io/maven-central/v/top.yukonga.miuix.kmp/miuix)](https://search.maven.org/search?q=g:top.yukonga.miuix.kmp)
28+
29+
3. 在项目的 build.gradle.kts 中添加依赖：
30+
31+
- 在 Compose Multiplatform 项目目录的 build.gradle.kts 中：
2832
```kotlin
2933
kotlin {
3034
sourceSets {
3135
commonMain.dependencies {
3236
implementation("top.yukonga.miuix.kmp:miuix:<version>")
33-
// Other dependencies...
3437
}
35-
// Other sourceSets...
3638
}
37-
// Other configurations...
3839
}
3940

4041
```
4142

42-
在 Android Compose 项目目录的 build.gradle.kts 中
43+
- 在 Android Compose 项目目录的 build.gradle.kts 中：
4344
```kotlin
4445
dependencies {
45-
implementation("top.yukonga.miuix.kmp:miuix-android:<version>") // 请替换为最新版本
46+
implementation("top.yukonga.miuix.kmp:miuix-android:<version>")
4647
}
4748
```
4849

49-
在其他常规项目中使用多平台依赖，则只需要根据需要部署对应平台后缀的依赖即可
50+
- 在其他常规项目中使用，则只需要根据需要添加对应平台后缀的依赖即可：
5051
```kotlin
5152
implementation("top.yukonga.miuix.kmp:miuix-android:<version>")
5253
implementation("top.yukonga.miuix.kmp:miuix-iosarm64:<version>")
@@ -62,16 +63,42 @@ implementation("top.yukonga.miuix.kmp:miuix-js:<version>")
6263
## 基本用法
6364

6465
### 1. 应用 Miuix 主题
66+
6567
```kotlin
66-
TODO
68+
@Composable
69+
fun App() {
70+
val colors = if (isSystemInDarkTheme()) {
71+
darkColorScheme()
72+
} else {
73+
lightColorScheme()
74+
}
75+
MiuixTheme(
76+
colors = colors
77+
) {
78+
// Other Content...
79+
}
80+
}
6781
```
6882

69-
### 2. 使用 Miuix 组件
83+
### 2. 使用 Miuix 脚手架
84+
7085
```kotlin
71-
TODO
86+
Scaffold(
87+
topBar = {
88+
// TopBar
89+
},
90+
bottomBar = {
91+
// BottomBar
92+
},
93+
floatingActionButton = {
94+
// FloatingActionButton
95+
}
96+
) {
97+
// Content...
98+
}
7299
```
73100

74101
## 下一步
75102

76-
- 查看[组件](/components/index)了解所有可用组件
103+
- 查看[组件库](/components/index)了解所有可用组件
77104
- 浏览[示例应用](https://github.com/YuKongA/miuix-kotlin-multiplatform/tree/main/example)获取实际使用案例

‎docs/guide/multiplatform.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# 多平台支持

‎docs/index.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ layout: home
55
hero:
66
name: "Miuix"
77
text: "A UI library for Compose MultiPlatform"
8-
tagline: "为多平台应用提供小米 HyperOS 设计风格的组件库"
8+
tagline: "提供小米 HyperOS 设计风格的组件库"
99
image:
10-
src: /public/Icon.webp
10+
src: /Icon.webp
1111
alt: Logo
1212
actions:
1313
- theme: brand

0 commit comments

Comments
 (0)