Skip to content

Commit 0609475

Browse files
syf20020816syf20020816
committed
component quickstart
1 parent ab80a4b commit 0609475

File tree

11 files changed

+346
-6
lines changed

11 files changed

+346
-6
lines changed

‎docs/v0.1.0/zh/doc/components/_meta.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
[
22
"overview",
33
"install",
4+
"theme",
45
"resources",
56
"quick-start"
67
]

‎docs/v0.1.0/zh/doc/components/install.mdx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# 安装
2+
3+
在`GenUI`项目中是无需手动对`GenUI Builtin Components`进行安装的，在使用`Ract`创建项目时这些配置都会被自动构建。
4+
5+
## 配置说明
6+
7+
您会在由`Ract`自动构建的`gen_ui.toml`文件中看到如下配置:
8+
9+
```toml title="gen_ui.toml"
10+
[makepad.dependencies]
11+
gen_components = { path = "path/to/gen_components" }
12+
```
13+
14+
> [!TIP]
15+
>
16+
> 若您未看到这个配置请借助`ract config`的`get`命令获取`gen_components`的目录并进行添加，
17+
> 并将这个问题发布到`GenUI`到`issue`或我们的Discord频道，我会尽快回复您
18+
>
19+
> 点击这里发布：
20+
> - [GenUI Issues](https://github.com/Privoce/GenUI/issues)
21+
> - [Discord](https://discord.gg/jVEJDhE75Y)

‎docs/v0.1.0/zh/doc/components/overview.md

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎docs/v0.1.0/zh/doc/components/overview.mdx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# 总览
2+
3+
> [!TIP]
4+
>
5+
> 对于内置组件库的具体文档请参考: [组件](/zh/components/overview)
6+
>
7+
> 本系列文档只讲述在GenUI项目中简单的使用
8+
9+
## 介绍
10+
11+
`GenUI Builtin Components`是一个 `Makepad` 组件库，可直接集成到 `Makepad` 项目中。作为 `GenUI` 的核心组件库，它可作为 `GenUI` 项目的基础构建块，加速前端开发人员的开发过程。
12+
13+
然而，这不仅仅是一个组件库。它包含许多内置宏和系统 API，可简化开发工作流程并扩展 `Makepad` 的当前功能。它仅代表 `GenUI` 中许多基础模块的一部分，其功能类似于 `HTML` 元素，但采用更现代的方法设计。

‎docs/v0.1.0/zh/doc/components/quick-start.mdx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# 快速入门
2+
3+
本文档将讲述如何将`GenUI Builtin Components`使用与`GenUI`项目，我们会提供为每个组件提供易懂的使用文档。
4+
5+
## `label` 文本组件
6+
7+
## `view` 视图组件
8+
9+
10+
## `button` 按钮组件

‎docs/v0.1.0/zh/doc/components/resources.mdx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# 静态资源
2+
3+
## 字体
4+
5+
我们使用 [OPPO Sans 3.0 `OPPOSans-Regular.ttf`](https://www.coloros.com/article/A00000050/)作为内置字体。
6+
7+
- 商业用途：✅
8+
- 所需授权：✅
9+
- 二次开发：❌
10+
11+
### 遵循说明
12+
13+
您应遵守以下条款，违者将会被追究法律责任：
14+
15+
1. 不对字体进行改编或二次开发；
16+
2. 不对外售卖字体；
17+
3. 不向他方提供其他下载渠道；
18+
4. 不用于违法用途。
19+
20+
> [!WARNING]
21+
> **OPPO Sans（含中文及西文，3 款字重）允许个人或企业免费使用，含商业用途，版权归 OPPO 广东移动通信有限公司所有。**

‎docs/v0.1.0/zh/doc/components/theme.mdx

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
import Color from "@theme/components/Color";
2+
3+
# 主题
4+
5+
`GenUI Theme Color` 是 `GenUI` 的主题颜色，包括一系列用于定义组件颜色的颜色变量。我们提供了默认的配色方案。
6+
7+
在颜色类型上，我们主要分为以下几种：
8+
9+
1. Dark
10+
2. Primary
11+
3. Info
12+
4. Success
13+
5. Warning
14+
6. Error
15+
16+
每种颜色类型都含有 11 种色值: `[25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900]`
17+
18+
**其中主色值为`500`**
19+
20+
## Dark
21+
22+
<Color
23+
title="Dark"
24+
colors={['#6e7176',
25+
'#5b5f64',
26+
'#42464d',
27+
'#3b4047',
28+
'#2f333b',
29+
'#282d35',
30+
'#22272F',
31+
'#1f242b',
32+
'#1d2127',
33+
'#1a1e24',
34+
'#0f1115']}
35+
></Color>
36+
37+
- `25`: `#6e7176`
38+
- `50`: `#5b5f64`
39+
- `100`: `#42464d`
40+
- `200`: `#3b4047`
41+
- `300`: `#2f333b`
42+
- `400`: `#282d35`
43+
- `500`: `#22272F`
44+
- `600`: `#1f242b`
45+
- `700`: `#1d2127`
46+
- `800`: `#1a1e24`
47+
- `900`: `#0f1115`
48+
49+
## Primary
50+
51+
<Color
52+
title="Primary"
53+
colors={[
54+
'#F5FEFF',
55+
'#ECFDFF',
56+
'#CFF9FE',
57+
'#A5F0FC',
58+
'#67E3F9',
59+
'#22CCEE',
60+
'#06AED4',
61+
'#088AB2',
62+
'#0E6F90',
63+
'#155B75',
64+
'#164C63'
65+
]}
66+
></Color>
67+
68+
- `25`: `#F5FEFF`
69+
- `50`: `#ECFDFF`
70+
- `100`: `#CFF9FE`
71+
- `200`: `#A5F0FC`
72+
- `300`: `#67E3F9`
73+
- `400`: `#22CCEE`
74+
- `500`: `#06AED4`
75+
- `600`: `#088AB2`
76+
- `700`: `#0E6F90`
77+
- `800`: `#155B75`
78+
- `900`: `#164C63`
79+
80+
## Info
81+
82+
<Color
83+
title="Info"
84+
colors={[
85+
'#F6FEF9',
86+
'#ECFDF3',
87+
'#D1FADF',
88+
'#A6F4C5',
89+
'#6CE9A6',
90+
'#32D583',
91+
'#12B76A',
92+
'#039855',
93+
'#027A48',
94+
'#05603A',
95+
'#054F31'
96+
]}
97+
></Color>
98+
99+
- `25`: `#FCFCFD`
100+
- `50`: `#F9FAFB`
101+
- `100`: `#F2F4F7`
102+
- `200`: `#EAECF0`
103+
- `300`: `#D0D5DD`
104+
- `400`: `#95A2D3`
105+
- `500`: `#667085`
106+
- `600`: `#475467`
107+
- `700`: `#344054`
108+
- `800`: `#1D2939`
109+
- `900`: `#101828`
110+
111+
## Success
112+
113+
<Color
114+
title="Success"
115+
colors={[
116+
'#FCFCFD',
117+
'#F9FAFB',
118+
'#F2F4F7',
119+
'#EAECF0',
120+
'#D0D5DD',
121+
'#95A2D3',
122+
'#667085',
123+
'#475467',
124+
'#344054',
125+
'#1D2939',
126+
'#101828'
127+
]}
128+
></Color>
129+
130+
- `25`: `#F6FEF9`
131+
- `50`: `#ECFDF3`
132+
- `100`: `#D1FADF`
133+
- `200`: `#A6F4C5`
134+
- `300`: `#6CE9A6`
135+
- `400`: `#32D583`
136+
- `500`: `#12B76A`
137+
- `600`: `#039855`
138+
- `700`: `#027A48`
139+
- `800`: `#05603A`
140+
- `900`: `#054F31`
141+
142+
## Warning
143+
144+
<Color
145+
title="Warning"
146+
colors={[
147+
'#FFFCF5',
148+
'#FFFAEB',
149+
'#FEF0C7',
150+
'#FEDF89',
151+
'#FEC84B',
152+
'#FDB022',
153+
'#F79009',
154+
'#DC6803',
155+
'#B54708',
156+
'#93370D',
157+
'#7A2E0E'
158+
]}
159+
></Color>
160+
161+
- `25`: `#FFFCF5`
162+
- `50`: `#FFFAEB`
163+
- `100`: `#FEF0C7`
164+
- `200`: `#FEDF89`
165+
- `300`: `#FEC84B`
166+
- `400`: `#FDB022`
167+
- `500`: `#F79009`
168+
- `600`: `#DC6803`
169+
- `700`: `#B54708`
170+
- `800`: `#93370D`
171+
- `900`: `#7A2E0E`
172+
173+
## Error
174+
<Color
175+
title="Error"
176+
colors={[
177+
'#FFFBFA',
178+
'#FEF3F2',
179+
'#FEE4E2',
180+
'#FECDCA',
181+
'#FDA29B',
182+
'#F97066',
183+
'#F04438',
184+
'#D92D2D',
185+
'#B42318',
186+
'#912018',
187+
'#7A271A'
188+
]}
189+
></Color>
190+
191+
- `25`: `#FFFBFA`
192+
- `50`: `#FEF3F2`
193+
- `100`: `#FEE4E2`
194+
- `200`: `#FECDCA`
195+
- `300`: `#FDA29B`
196+
- `400`: `#F97066`
197+
- `500`: `#F04438`
198+
- `600`: `#D92D2D`
199+
- `700`: `#B42318`
200+
- `800`: `#912018`
201+
- `900`: `#7A271A`

‎docs/v0.1.0/zh/doc/config/env.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { Tab, Tabs } from 'rspress/theme';
1010
>
1111
> 相较于手动，我们推荐您使用`ract config`命令
1212
>
13-
> 若您不知道`Ract`如何使用请参考：[Ract 使用说明](zh/doc/tutorial/ract/introduction#使用说明)
13+
> 若您不知道`Ract`如何使用请参考：[Ract 使用说明](zh/tools/ract/introduction#使用说明)
1414
1515
## Ract安装目录结构说明
1616

‎docs/v0.1.0/zh/doc/guide/tools.mdx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@ import { Badge } from '@theme';
22

33
# 工具
44

5+
> [!TIP]
6+
>
7+
> 详细工具文档请参考: [工具](zh/tools/overview)
8+
59
## Ract
610

711
> Github: https://github.com/Privoce/ract

‎theme/components/Color/index.module.scss

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
.color {
2+
height: 120px;
3+
width: 100%;
4+
overflow: hidden;
5+
border-radius: 8px;
6+
display: flex;
7+
align-items: flex-end;
8+
justify-content: flex-start;
9+
border: 1px solid #ff8143;
10+
box-shadow: 0 0 10px 2px #ff8143;
11+
flex-wrap: wrap;
12+
&-info{
13+
padding: 0px 16px;
14+
height: 36px;
15+
width: 100%;
16+
display: flex;
17+
align-items: center;
18+
justify-content: flex-end;
19+
flex-wrap: wrap;
20+
h2 {
21+
font-weight: 700;
22+
font-size: 18px;
23+
width: 100%;
24+
}
25+
h3 {
26+
font-weight: 700;
27+
font-size: 16px;
28+
}
29+
}
30+
&-blocks{
31+
margin-top: 8px;
32+
height: 46px;
33+
width: 100%;
34+
display: flex;
35+
align-items: stretch;
36+
justify-content: flex-start;
37+
flex-wrap: nowrap;
38+
&-item{
39+
height: 100%;
40+
width: 9.0909%;
41+
}
42+
}
43+
}

0 commit comments

Comments
 (0)