Skip to content

Commit 8d38055

Browse files
honghuangdchonghuangdc
committed
docs(projects): add docs home page
1 parent 943d7c5 commit 8d38055

File tree

26 files changed

+769
-32
lines changed

26 files changed

+769
-32
lines changed

‎docs/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<link rel="icon" href="/favicon.svg" />
6+
<link rel="icon" href="/logo.svg" />
77
<title>SoybeanUI Documentation</title>
88
</head>
99
<body>

‎docs/locales/en.yml‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,3 +25,22 @@ components:
2525
button:
2626
title: Button
2727
desc: Button component
28+
home:
29+
title: Soybean UI
30+
description: A modern, headless-first UI component library for Vue 3. Crafted for performance, accessibility, and developer experience.
31+
actions:
32+
start: Get Started
33+
github: GitHub
34+
features:
35+
accessible:
36+
title: Accessible
37+
desc: Follows WAI-ARIA patterns for accessibility.
38+
headless:
39+
title: Headless
40+
desc: Logic and styles are separated.
41+
type-safe:
42+
title: Type Safe
43+
desc: Written in TypeScript with full type support.
44+
customizable:
45+
title: Customizable
46+
desc: Built with UnoCSS and tailwind-variants for easy theming.

‎docs/locales/zh-CN.yml‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,3 +25,22 @@ components:
2525
button:
2626
title: 按钮
2727
desc: 按钮组件
28+
home:
29+
title: Soybean UI
30+
description: 一个现代化的、无头优先的 Vue 3 UI 组件库。专为性能、可访问性和开发体验而打造。
31+
actions:
32+
start: 开始使用
33+
github: GitHub
34+
features:
35+
accessible:
36+
title: 可访问性
37+
desc: 遵循 WAI-ARIA 模式，确保无障碍访问。
38+
headless:
39+
title: 无头组件
40+
desc: 逻辑与样式分离，提供最大的灵活性。
41+
type-safe:
42+
title: 类型安全
43+
desc: 使用 TypeScript 编写，提供完整的类型支持。
44+
customizable:
45+
title: 高度可定制
46+
desc: 基于 UnoCSS 和 tailwind-variants 构建，轻松定制主题。

‎docs/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"dependencies": {
2020
"@soybeanjs/ui": "workspace:^",
2121
"@unocss/reset": "^66.5.7",
22+
"motion-v": "^1.7.4",
2223
"nprogress": "^0.2.0",
2324
"pinia": "^3.0.4",
2425
"vue": "^3.5.24",

‎docs/public/favicon.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎docs/public/logo.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎docs/src/docs/card/demos/basic.vue‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<script setup lang="ts">
2+
import { SButton, SCard } from '@soybeanjs/ui';
3+
</script>
4+
5+
<template>
6+
<div class="max-w-md">
7+
<SCard title="Card Title" description="Card Description">
8+
<template #extra>
9+
<SButton size="small" variant="ghost">Action</SButton>
10+
</template>
11+
<p class="text-gray-600 dark:text-gray-300">This is the content of the card. It can contain any elements.</p>
12+
<template #footer>
13+
<div class="flex justify-end gap-2 w-full">
14+
<SButton variant="outline">Cancel</SButton>
15+
<SButton>Submit</SButton>
16+
</div>
17+
</template>
18+
</SCard>
19+
</div>
20+
</template>

‎docs/src/docs/card/index.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
---
2+
title: Card 卡片
3+
---
4+
5+
# Card 卡片
6+
7+
将信息聚合在卡片容器中展示。
8+
9+
## 基础用法
10+
11+
```demo
12+
demos/basic.vue
13+
```
14+
15+
## API
16+
17+
### Card Props
18+
19+
| 名称 | 类型 | 默认值 | 说明 |
20+
| :------------ | :---------- | :--------- | :------------- |
21+
| `title` | `string` | - | 卡片标题 |
22+
| `description` | `string` | - | 卡片描述 |
23+
| `size` | `ThemeSize` | `'medium'` | 卡片尺寸 |
24+
| `scrollable` | `boolean` | `true` | 内容是否可滚动 |
25+
| `split` | `boolean` | `false` | 是否显示分割线 |
26+
27+
### Card Slots
28+
29+
| 名称 | 说明 |
30+
| :------------ | :------------- |
31+
| `default` | 卡片内容 |
32+
| `header` | 卡片头部 |
33+
| `title` | 标题内容 |
34+
| `description` | 描述内容 |
35+
| `extra` | 头部右侧操作区 |
36+
| `footer` | 卡片底部 |

‎docs/src/docs/checkbox/demos/basic.vue‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<script setup lang="ts">
2+
import { ref } from 'vue';
3+
import { SCheckbox } from '@soybeanjs/ui';
4+
5+
const checked1 = ref(true);
6+
const checked2 = ref(false);
7+
</script>
8+
9+
<template>
10+
<div class="flex gap-4">
11+
<SCheckbox v-model="checked1" label="Checked" />
12+
<SCheckbox v-model="checked2" label="Unchecked" />
13+
<SCheckbox label="Disabled Checked" :model-value="true" disabled />
14+
<SCheckbox label="Disabled Unchecked" :model-value="false" disabled />
15+
</div>
16+
</template>

‎docs/src/docs/checkbox/index.md‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
---
2+
title: Checkbox 复选框
3+
---
4+
5+
# Checkbox 复选框
6+
7+
在一组备选项中进行多选。
8+
9+
## 基础用法
10+
11+
```demo
12+
demos/basic.vue
13+
```
14+
15+
## API
16+
17+
### Checkbox Props
18+
19+
| 名称 | 类型 | 默认值 | 说明 |
20+
| :----------- | :-------------- | :---------- | :--------- |
21+
| `modelValue` | `boolean` | - | 绑定值 |
22+
| `label` | `string` | - | 复选框文本 |
23+
| `color` | `ThemeColor` | `'primary'` | 颜色 |
24+
| `size` | `ThemeSize` | `'medium'` | 尺寸 |
25+
| `shape` | `CheckboxShape` | `'rounded'` | 形状 |
26+
| `disabled` | `boolean` | `false` | 是否禁用 |
27+
28+
### Checkbox Slots
29+
30+
| 名称 | 说明 |
31+
| :---------- | :----------------- |
32+
| `default` | 复选框文本内容 |
33+
| `indicator` | 选中时的指示器图标 |
34+
35+
### Checkbox Events
36+
37+
| 名称 | 参数 | 说明 |
38+
| :------------------ | :----------------- | :--------------- |
39+
| `update:modelValue` | `(value: boolean)` | 绑定值改变时触发 |

0 commit comments

Comments
 (0)