Skip to content

Commit b44f9af

Browse files
sendyasendya
committed
feat: add components docs
1 parent 6282ddc commit b44f9af

File tree

6 files changed

+232
-4
lines changed

6 files changed

+232
-4
lines changed

‎README.md

+8-4
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ An out-of-box UI solution for enterprise applications as a Vue boilerplate. base
55
</div>
66

77

8+
9+
810
Overview
911
----
1012

@@ -118,13 +120,15 @@ yarn run lint
118120
----
119121

120122
- [路由/菜单说明](https://github.com/sendya/ant-design-pro-vue/blob/master/src/router/README.md)
121-
122123
- [Table 重封装组件](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/table/README.md)
123-
124124
- [ANTD 默认配置项](https://github.com/sendya/ant-design-pro-vue/blob/master/src/defaultSettings.js)
125-
126125
- [按需加载/减少打包大小](https://github.com/sendya/ant-design-pro-vue/blob/master/docs/LoadOnDemand.md)
127-
126+
- ANTD PRO 额外组件
127+
- Trend 趋势标记 [Trend.md](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/Trend/index.md)
128+
- AvatarList 用户头像列表 [AvatarList.md](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/AvatarList/index.md)
129+
- CountDown 倒计时 [CountDown.md](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/CountDown/index.md)
130+
- Ellipsis 文本自动省略号 [Ellipsis.md](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/Ellipsis/index.md)
131+
- NumberInfo 数据文本 [NumberInfo.md](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/NumberInfo/index.md)
128132
- 其他待补充...
129133

130134

‎src/components/AvatarList/index.md

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
# AvatarList 用户头像列表
2+
3+
4+
一组用户头像，常用在项目/团队成员列表。可通过设置 `size` 属性来指定头像大小。
5+
6+
7+
8+
引用方式：
9+
10+
```javascript
11+
import AvatarList from '@/components/AvatarList'
12+
const AvatarListItem = AvatarList.AvatarItem
13+
14+
export default {
15+
components: {
16+
AvatarList,
17+
AvatarListItem
18+
}
19+
}
20+
```
21+
22+
23+
24+
## 代码演示 [demo](https://pro.loacg.com/test/home)
25+
26+
```html
27+
<avatar-list size="mini">
28+
<avatar-list-item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png" />
29+
<avatar-list-item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png" />
30+
<avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
31+
</avatar-list>
32+
```
33+
或
34+
```html
35+
<avatar-list :max-length="3">
36+
<avatar-list-item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png" />
37+
<avatar-list-item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png" />
38+
<avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
39+
<avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
40+
<avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
41+
<avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
42+
<avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
43+
</avatar-list>
44+
```
45+
46+
47+
48+
## API
49+
50+
### AvatarList
51+
52+
| 参数 | 说明 | 类型 | 默认值 |
53+
| ---------------- | -------- | ---------------------------------- | --------- |
54+
| size | 头像大小 | `large`、`small` 、`mini`, `default` | `default` |
55+
| maxLength | 要显示的最大项目 | number | - |
56+
| excessItemsStyle | 多余的项目风格 | CSSProperties | - |
57+
58+
### AvatarList.Item
59+
60+
| 参数 | 说明 | 类型 | 默认值 |
61+
| ---- | ------ | --------- | --- |
62+
| tips | 头像展示文案 | string | - |
63+
| src | 头像图片连接 | string | - |
64+

‎src/components/CountDown/index.md

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# CountDown 倒计时
2+
3+
倒计时组件。
4+
5+
6+
7+
引用方式：
8+
9+
```javascript
10+
import CountDown from '@/components/CountDown/CountDown'
11+
12+
export default {
13+
components: {
14+
CountDown
15+
}
16+
}
17+
```
18+
19+
20+
21+
## 代码演示 [demo](https://pro.loacg.com/test/home)
22+
23+
```html
24+
<count-down :target="new Date().getTime() + 3000000" :on-end="onEndHandle" />
25+
```
26+
27+
28+
29+
## API
30+
31+
| 参数 | 说明 | 类型 | 默认值 |
32+
|----------|------------------------------------------|-------------|-------|
33+
| target | 目标时间 | Date | - |
34+
| onEnd | 倒计时结束回调 | funtion | -|

‎src/components/Ellipsis/index.md

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# Ellipsis 文本自动省略号
2+
3+
文本过长自动处理省略号，支持按照文本长度和最大行数两种方式截取。
4+
5+
6+
7+
引用方式：
8+
9+
```javascript
10+
import Ellipsis from '@/components/Ellipsis'
11+
12+
export default {
13+
components: {
14+
Ellipsis
15+
}
16+
}
17+
```
18+
19+
20+
21+
## 代码演示 [demo](https://pro.loacg.com/test/home)
22+
23+
```html
24+
<ellipsis :length="100" tooltip>
25+
There were injuries alleged in three cases in 2015, and a
26+
fourth incident in September, according to the safety recall report. After meeting with US regulators in October, the firm decided to issue a voluntary recall.
27+
</ellipsis>
28+
```
29+
30+
31+
32+
## API
33+
34+
35+
参数 | 说明 | 类型 | 默认值
36+
----|------|-----|------
37+
tooltip | 移动到文本展示完整内容的提示 | boolean | -
38+
length | 在按照长度截取下的文本最大字符数，超过则截取省略 | number | -

‎src/components/NumberInfo/index.md

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
# NumberInfo 数据文本
2+
3+
常用在数据卡片中，用于突出展示某个业务数据。
4+
5+
6+
7+
引用方式：
8+
9+
```javascript
10+
import NumberInfo from '@/components/NumberInfo'
11+
12+
export default {
13+
components: {
14+
NumberInfo
15+
}
16+
}
17+
```
18+
19+
20+
21+
## 代码演示 [demo](https://pro.loacg.com/test/home)
22+
23+
```html
24+
<number-info
25+
:sub-title="() => { return 'Visits this week' }"
26+
:total="12321"
27+
status="up"
28+
:sub-total="17.1"></number-info>
29+
```
30+
31+
32+
33+
## API
34+
35+
参数 | 说明 | 类型 | 默认值
36+
----|------|-----|------
37+
title | 标题 | ReactNode\|string | -
38+
subTitle | 子标题 | ReactNode\|string | -
39+
total | 总量 | ReactNode\|string | -
40+
subTotal | 子总量 | ReactNode\|string | -
41+
status | 增加状态 | 'up \| down' | -
42+
theme | 状态样式 | string | 'light'
43+
gap | 设置数字和描述之间的间距（像素）| number | 8

‎src/components/Trend/index.md

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
# Trend 趋势标记
2+
3+
趋势符号，标记上升和下降趋势。通常用绿色代表“好”，红色代表“不好”，股票涨跌场景除外。
4+
5+
6+
7+
引用方式：
8+
9+
```javascript
10+
import Trend from '@/components/Trend'
11+
12+
export default {
13+
components: {
14+
Trend
15+
}
16+
}
17+
```
18+
19+
20+
21+
## 代码演示 [demo](https://pro.loacg.com/test/home)
22+
23+
```html
24+
<trend flag="up">5%</trend>
25+
```
26+
或
27+
```html
28+
<trend flag="up">
29+
<span slot="term">工资</span>
30+
5%
31+
</trend>
32+
```
33+
或
34+
```html
35+
<trend flag="up" term="工资">5%</trend>
36+
```
37+
38+
39+
## API
40+
41+
| 参数 | 说明 | 类型 | 默认值 |
42+
|----------|------------------------------------------|-------------|-------|
43+
| flag | 上升下降标识：`up|down` | string | - |
44+
| reverseColor | 颜色反转 | Boolean | false |
45+

0 commit comments

Comments
 (0)