React timeline
git clone https://github.com/uxcore/uxcore-timeline
cd uxcore-timeline
npm install
npm run server
if you'd like to save your install time,you can use uxcore-tools globally.
npm install uxcore-tools -g
git clone https://github.com/uxcore/uxcore-timeline
cd uxcore-timeline
npm install
npm run dep
npm run start
npm run test
npm run coverage
http://uxcore.github.io/components/timeline
Yes please! See the CONTRIBUTING for details.
- 当有一系列信息需要从上至下按时间排列时;
- 需要有一条时间轴进行视觉上的串联时;
<Timeline>
<Timeline.Item title='2017-10-25'>
<p>content1</p>
<p>content1</p>
</Timeline.Item>
<Timeline.Item title='2017-10-26' active>
<p>content2</p>
<p>content2</p>
</Timeline.Item>
<Timeline.Item title='2017-10-27'>
<p>content3</p>
<p>content3</p>
</Timeline.Item>
</Timeline>
时间轴。
Name | Type | Required | Default | Comments |
---|---|---|---|---|
className | String | false | 无 | 额外类名 |
pending | jsx | false | 无 | 指定最后一个幽灵节点内容 |
时间轴的每一个节点。
Name | Type | Required | Default | Comments |
---|---|---|---|---|
className | String | false | 无 | 额外类名 |
color | String | false | 无 | 指定节点的色调 orange, blue, gray, green ,或自定义的色值 |
dot | jsx | false | 无 | 自定义时间轴点 |
dotted | Boolean | false | false | 虚线连接线 |
active | Boolean | false | false | 指定当前时间节点or处理中状态 |
title | String | false | 无 | 节点的标题 |