From eb2a31e20c7de5e22d10a557b4159fd25c1634f4 Mon Sep 17 00:00:00 2001 From: nikogu <644506165@qq.com> Date: Thu, 19 Oct 2017 17:56:14 +0800 Subject: [PATCH] update component docs --- src/components/AvatarList/demo/simple.md | 18 +++++++++++++ src/components/AvatarList/index.md | 25 ++++++++++++++++++ src/components/Charts/demo/bar.md | 2 ++ src/components/Charts/demo/gauge.md | 2 ++ src/components/Charts/demo/mini-area.md | 1 + src/components/Charts/demo/mini-bar.md | 3 +++ src/components/Charts/demo/mini-pie.md | 2 ++ src/components/Charts/demo/mix.md | 8 +++--- src/components/Charts/demo/tag-cloud.md | 25 ++++++++++++++++++ src/components/Charts/demo/timeline-chart.md | 27 ++++++++++++++++++++ src/components/Charts/demo/waterwave.md | 2 ++ src/components/Charts/index.md | 22 +++++++++++++--- src/components/CountDown/demo/simple.md | 6 ++--- src/components/CountDown/index.js | 4 +-- 14 files changed, 134 insertions(+), 13 deletions(-) create mode 100644 src/components/AvatarList/demo/simple.md create mode 100644 src/components/AvatarList/index.md create mode 100644 src/components/Charts/demo/tag-cloud.md create mode 100644 src/components/Charts/demo/timeline-chart.md diff --git a/src/components/AvatarList/demo/simple.md b/src/components/AvatarList/demo/simple.md new file mode 100644 index 00000000..ecc9c81c --- /dev/null +++ b/src/components/AvatarList/demo/simple.md @@ -0,0 +1,18 @@ +--- +order: 0 +title: 基础使用 +--- + +简单的用户头像列表。 + +````jsx +import AvatarList from 'ant-design-pro/lib/AvatarList'; + +ReactDOM.render( + + + + + +, mountNode); +```` diff --git a/src/components/AvatarList/index.md b/src/components/AvatarList/index.md new file mode 100644 index 00000000..f9149ad9 --- /dev/null +++ b/src/components/AvatarList/index.md @@ -0,0 +1,25 @@ +--- +category: Components +type: General +title: AvatarList +subtitle: 用户头像列表 +cols: 1 +--- + +倒计时组件。 + +## API + +### AvatarList + +| 参数 | 说明 | 类型 | 默认值 | +|----------|------------------------------------------|-------------|-------| +| size | 头像大小 | `large`、`small` | - | + +### AvatarList.Item + +| 参数 | 说明 | 类型 | 默认值 | +|----------|------------------------------------------|-------------|-------| +| tips | 头像展示文案 | ReactNode\/string | - | +| src | 头像图片连接 | string | - | + diff --git a/src/components/Charts/demo/bar.md b/src/components/Charts/demo/bar.md index ea860076..955f44e0 100644 --- a/src/components/Charts/demo/bar.md +++ b/src/components/Charts/demo/bar.md @@ -3,6 +3,8 @@ order: 4 title: 柱状图 --- +通过设置 `x`，`y` 属性，可以快速的构建出一个漂亮的柱状图，各种纬度的关系则是通过自定义的数据展现。 + ````jsx import { Bar } from 'ant-design-pro/lib/Charts'; diff --git a/src/components/Charts/demo/gauge.md b/src/components/Charts/demo/gauge.md index 9b82298d..f53465d8 100644 --- a/src/components/Charts/demo/gauge.md +++ b/src/components/Charts/demo/gauge.md @@ -3,6 +3,8 @@ order: 7 title: 仪表盘 --- +仪表盘是一种进度展示方式，可以更直观的展示当前的进展情况，通常也可表示占比。 + ````jsx import { Gauge } from 'ant-design-pro/lib/Charts'; diff --git a/src/components/Charts/demo/mini-area.md b/src/components/Charts/demo/mini-area.md index d1de460b..2b9bfb47 100644 --- a/src/components/Charts/demo/mini-area.md +++ b/src/components/Charts/demo/mini-area.md @@ -1,5 +1,6 @@ --- order: 2 +col: 2 title: 迷你区域图 --- diff --git a/src/components/Charts/demo/mini-bar.md b/src/components/Charts/demo/mini-bar.md index 9a384fc6..fef301bc 100644 --- a/src/components/Charts/demo/mini-bar.md +++ b/src/components/Charts/demo/mini-bar.md @@ -1,8 +1,11 @@ --- order: 2 +col: 2 title: 迷你柱状图 --- +迷你柱状图更适合展示简单的区间数据，简洁的表现方式可以很好的减少大数据量的视觉展现压力。 + ````jsx import { MiniBar } from 'ant-design-pro/lib/Charts'; import moment from 'moment'; diff --git a/src/components/Charts/demo/mini-pie.md b/src/components/Charts/demo/mini-pie.md index 0a76e3c4..40c63b0d 100644 --- a/src/components/Charts/demo/mini-pie.md +++ b/src/components/Charts/demo/mini-pie.md @@ -3,6 +3,8 @@ order: 6 title: 迷你饼状图 --- +通过简化 `Pie` 属性的设置，可以快速的实现极简的饼状图，可配合 `ChartCard` 组合展现更多业务场景。 + ````jsx import { Pie } from 'ant-design-pro/lib/Charts'; diff --git a/src/components/Charts/demo/mix.md b/src/components/Charts/demo/mix.md index 5ec7e9a2..7bb384fa 100644 --- a/src/components/Charts/demo/mix.md +++ b/src/components/Charts/demo/mix.md @@ -21,8 +21,8 @@ for (let i = 0; i < 20; i += 1) { } ReactDOM.render( - - + + - + } @@ -55,7 +55,7 @@ ReactDOM.render( /> - + } diff --git a/src/components/Charts/demo/tag-cloud.md b/src/components/Charts/demo/tag-cloud.md new file mode 100644 index 00000000..c86bdd84 --- /dev/null +++ b/src/components/Charts/demo/tag-cloud.md @@ -0,0 +1,25 @@ +--- +order: 9 +title: 标签云 +--- + +标签云是一套相关的标签以及与此相应的权重展示方式，一般典型的标签云有 30 至 150 个标签，而权重影响使用的字体大小或其他视觉效果。 + +````jsx +import { TagCloud } from 'ant-design-pro/lib/Charts'; + +const tags = []; +for (let i = 0; i < 50; i += 1) { + tags.push({ + name: `test-${i}`, + value: Math.floor((Math.random() * 50)) + 20, + }); +} + +ReactDOM.render( + +, mountNode); +```` diff --git a/src/components/Charts/demo/timeline-chart.md b/src/components/Charts/demo/timeline-chart.md new file mode 100644 index 00000000..d22c2fd9 --- /dev/null +++ b/src/components/Charts/demo/timeline-chart.md @@ -0,0 +1,27 @@ +--- +order: 9 +title: 带有时间轴的图表 +--- + +使用 `TimelineChart` 组件可以实现带有时间轴的柱状图展现，而其中的 `x` 属性，则是时间值的指向，默认最多支持同时展现两个指标，分别是 `y1` 和 `y2`。 + +````jsx +import { TimelineChart } from 'ant-design-pro/lib/Charts'; + +const chartData = []; +for (let i = 0; i < 20; i += 1) { + chartData.push({ + x: (new Date().getTime()) + (1000 * 60 * 30 * i), + y1: Math.floor(Math.random() * 100) + 10, + y2: Math.floor(Math.random() * 100) + 10, + }); +} + +ReactDOM.render( + +, mountNode); +```` diff --git a/src/components/Charts/demo/waterwave.md b/src/components/Charts/demo/waterwave.md index 742a6c7d..8b00e5a7 100644 --- a/src/components/Charts/demo/waterwave.md +++ b/src/components/Charts/demo/waterwave.md @@ -3,6 +3,8 @@ order: 8 title: 水波图 --- +水波图是一种比例的展示方式，可以更直观的展示关键值的占比。 + ````jsx import { WaterWave } from 'ant-design-pro/lib/Charts'; diff --git a/src/components/Charts/index.md b/src/components/Charts/index.md index 47a13d5a..5beabe56 100644 --- a/src/components/Charts/index.md +++ b/src/components/Charts/index.md @@ -3,12 +3,12 @@ category: Components type: General title: Charts subtitle: 图表 -cols: 1 +cols: 2 --- Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https://antv.alipay.com/g2/doc/index.html) 按照 Ant Design 图表规范封装，需要注意的是 Ant Design Pro 的图表组件以套件形式提供，可以任意组合实现复杂的业务需求。 -因为结合了 Ant Design 的标准设计，简化了大量 API 配置，所以如果需要灵活定制图表，可以参考 Ant Design Pro 图表实现，自行基于 [G2](https://antv.alipay.com/g2/doc/index.html) 封装图表组件使用。 +因为结合了 Ant Design 的标准设计，本着极简的设计思想以及开箱即用的理念，简化了大量 API 配置，所以如果需要灵活定制图表，可以参考 Ant Design Pro 图表实现，自行基于 [G2](https://antv.alipay.com/g2/doc/index.html) 封装图表组件使用。 ## API @@ -35,6 +35,7 @@ Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https | 参数 | 说明 | 类型 | 默认值 | |----------|------------------------------------------|-------------|-------| | color | 图表颜色 | string | `#33abfb` | +| borderColor | 图表边颜色 | string | `#33abfb` | | height | 图表高度 | number | - | | line | 是否显示描边 | boolean | false | | animate | 是否显示动画 | boolean | true | @@ -104,6 +105,21 @@ Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https | color | 图表颜色 | string | `#19AFFA` | | percent | 进度比例 | number | - | +### TagCloud + +| 参数 | 说明 | 类型 | 默认值 | +|----------|------------------------------------------|-------------|-------| +| tags | 标题 | Array | - | +| height | 高度值 | number | - | + +### TimelineChart + +| 参数 | 说明 | 类型 | 默认值 | +|----------|------------------------------------------|-------------|-------| +| data | 标题 | Array | - | +| titleMap | 指标别名 | Object{y1: '客流量', y2: '支付笔数'} | - | +| height | 高度值 | number | 400 | + ### Trend | 参数 | 说明 | 类型 | 默认值 | @@ -127,5 +143,3 @@ Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https |----------|------------------------------------------|-------------|-------| | label | 标题 | ReactNode\|string | - | | value | 值 | ReactNode\|string | - | - - diff --git a/src/components/CountDown/demo/simple.md b/src/components/CountDown/demo/simple.md index 5a3d8d55..62e9c909 100644 --- a/src/components/CountDown/demo/simple.md +++ b/src/components/CountDown/demo/simple.md @@ -1,9 +1,9 @@ --- order: 0 -title: Simple +title: 基础样例 --- -简单的页头。 +简单的倒计时组件使用。 ````jsx import CountDown from 'ant-design-pro/lib/CountDown'; @@ -11,6 +11,6 @@ import CountDown from 'ant-design-pro/lib/CountDown'; const targetTime = new Date().getTime() + 3900000; ReactDOM.render( - + , mountNode); ```` diff --git a/src/components/CountDown/index.js b/src/components/CountDown/index.js index 19c1cf48..f7caec22 100644 --- a/src/components/CountDown/index.js +++ b/src/components/CountDown/index.js @@ -93,12 +93,12 @@ class CountDown extends Component { } render() { - const { format = this.defaultFormat } = this.props; + const { format = this.defaultFormat, ...rest } = this.props; const { lastTime } = this.state; const result = format(lastTime); - return result; + return ({result}); } } -- GitLab