Skip to content

Commit 420d3fa

Browse files
itshizhanitshizhan
committed
docs
1 parent 41be9af commit 420d3fa

File tree

6 files changed

+104
-28
lines changed

6 files changed

+104
-28
lines changed

‎docs-site/components/CenterBlock.jsx

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from 'react'
2+
3+
const CenterBlcok = (props)=>(
4+
<div style={{display:"flex",justifyContent:'center',alignItems:'center',padding:'6px',background:props.bgcolor,color:props.color||'#ffffff'}}>
5+
{props.children}
6+
</div>
7+
)
8+
9+
export default CenterBlcok

‎docs-site/mdx/1_guide/Colors.mdx

+61-1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,66 @@ route: /guide/colors
66
---
77

88

9+
import { Playground,PropsTable } from 'docz'
10+
import CenterBlcok from '../../components/CenterBlock'
11+
import { Row,Col } from '@oovui/core'
912

1013
# 颜色
11-
颜色
14+
oovui 组件的颜色主要基于antd的设计语言，只选取最基本组件需要必须的颜色。
15+
16+
# 所有颜色
17+
<Playground>
18+
<Row style={{'marginBottom':'5px'}} gutter="10px">
19+
<Col span={6}>
20+
<CenterBlcok bgcolor="#1890ff">primary: #1890ff</CenterBlcok>
21+
</Col>
22+
<Col span={6}>
23+
<CenterBlcok bgcolor="#91d5ff" color="#fafafa">info:#91d5ff</CenterBlcok>
24+
</Col>
25+
<Col span={6}>
26+
<CenterBlcok bgcolor="#52c41a">success:#52c41a</CenterBlcok>
27+
</Col>
28+
<Col span={6}>
29+
<CenterBlcok bgcolor="#faad14">warning:#faad14</CenterBlcok>
30+
</Col>
31+
</Row>
32+
<Row style={{'marginBottom':'5px'}} gutter="10px">
33+
<Col span={6}>
34+
<CenterBlcok bgcolor="#f5222d">danger/error: #f5222d </CenterBlcok>
35+
</Col>
36+
<Col span={6}>
37+
<CenterBlcok bgcolor="#e8e8e8" color="#676b70">cancel:#e8e8e8</CenterBlcok>
38+
</Col>
39+
</Row>
40+
</Playground>
41+
42+
43+
# Hover色彩
44+
<Playground>
45+
<Row style={{'marginBottom':'5px'}} gutter="10px">
46+
<Col span={6}>
47+
<CenterBlcok bgcolor="#1890ff">primary: #1890ff</CenterBlcok>
48+
</Col>
49+
<Col span={6}>
50+
<CenterBlcok bgcolor="#91d5ff" color="#fafafa">info:#91d5ff</CenterBlcok>
51+
</Col>
52+
<Col span={6}>
53+
<CenterBlcok bgcolor="#52c41a">success:#52c41a</CenterBlcok>
54+
</Col>
55+
<Col span={6}>
56+
<CenterBlcok bgcolor="#faad14">warning:#faad14</CenterBlcok>
57+
</Col>
58+
</Row>
59+
<Row style={{'marginBottom':'5px'}} gutter="10px">
60+
<Col span={6}>
61+
<CenterBlcok bgcolor="#f5222d">danger/error: #f5222d </CenterBlcok>
62+
</Col>
63+
<Col span={6}>
64+
<CenterBlcok bgcolor="#e8e8e8" color="#676b70">cancel:#e8e8e8</CenterBlcok>
65+
</Col>
66+
</Row>
67+
</Playground>
68+
69+
70+
# 辅助色
71+
如字体颜色、非品牌色背景、边框、阴影、灰色等

‎docs-site/mdx/1_guide/Fonts.mdx

+16-1
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,19 @@ route: /guide/fonts
88

99

1010
# 字体
11-
字体
11+
12+
## 默认字体
13+
参考：
14+
15+
- [页面可用性之浏览器默认字体与CSS中文字体
16+
](https://www.zhangxinxu.com/wordpress/2010/06/%E5%8F%AF%E7%94%A8%E6%80%A7%E4%B9%8B%E6%B5%8F%E8%A7%88%E5%99%A8%E9%BB%98%E8%AE%A4%E5%AD%97%E4%BD%93%E4%B8%8Ecss%E5%AD%97%E4%BD%93/)
17+
18+
19+
- [css font-family 字体及各大主流网站对比](https://www.cnblogs.com/zxrbky/p/9275338.html)
20+
```
21+
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
22+
```
23+
24+
## 字体使用规范
25+
26+
> TODO

‎docs-site/mdx/1_guide/icons.mdx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
name: Icons 图标
3+
menu: 指南
4+
order: 87
5+
route: /guide/icons
6+
---
7+
8+
9+
10+
# 图标
11+
图标

‎docs-site/mdx/2_components/button.mdx

+2-24
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,13 @@ Button 组件用于生成一个原生的button标签。
2323

2424
- 当需要在 Button 内嵌入 Icon 时，建议直接作为children 属性。可以放置在文字左边或右边
2525
- 通过设置shape属性为circle，可将按钮置为圆的形状。
26+
- 圆形按钮通常适合图标按钮
2627

2728
# 按钮状态：ghost
2829

2930
添加 ghost 属性即可让按钮处于幽灵状态，带有虚线边框，透明背景，同时字体颜色也会有改变
3031

3132

32-
3333
# 按钮状态：不可用
3434
添加 disabled 属性即可让按钮处于不可用状态，同时按钮样式也会改变。
3535

@@ -49,30 +49,8 @@ Button 组件用于生成一个原生的button标签。
4949
## 基本用法
5050

5151
<Playground>
52-
<Button text="Second Button"/>
52+
<Button>Primary</Button>
5353
</Playground>
5454

55-
<Playground>
56-
{
57-
()=>(
5855

59-
<Button text="Third Button"/>
60-
)
61-
}
62-
63-
</Playground>
6456

65-
<Playground>
66-
{
67-
()=>{
68-
const text = "My Button"
69-
return (
70-
<div>
71-
<Button text={ text }/>
72-
<Button text={ text }/>
73-
</div>
74-
)
75-
}
76-
}
77-
78-
</Playground>

‎doczrc.js

+5-2
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,10 @@ export default {
1818
},
1919
styles: {
2020
h1: {
21-
fontSize: 32,
21+
fontSize: 26,
2222
},
2323
h2: {
24-
fontSize: 22,
24+
fontSize: 20,
2525
},
2626
h3: {
2727
fontSize: 18,
@@ -32,6 +32,9 @@ export default {
3232
h5: {
3333
fontSize: 14,
3434
},
35+
h6: {
36+
fontSize: 14,
37+
},
3538
},
3639
}
3740

0 commit comments

Comments
 (0)