uxcore-timeline
React timeline
Development
git clone https://github.com/uxcore/uxcore-timelinecd uxcore-timelinenpm installnpm run server
if you'd like to save your install time,you can use uxcore-tools globally.
npm install uxcore-tools -ggit clone https://github.com/uxcore/uxcore-timelinecd uxcore-timelinenpm installnpm run depnpm run start
Test Case
npm run test
Coverage
npm run coverage
Demo
http://uxcore.github.io/components/timeline
Contribute
Yes please! See the CONTRIBUTING for details.
何时使用
- 当有一系列信息需要从上至下按时间排列时;
- 需要有一条时间轴进行视觉上的串联时;
API
<Timeline> <Timeline.Item ='2017-10-25'> <p>content1</p> <p>content1</p> </Timeline.Item> <Timeline.Item ='2017-10-26' > <p>content2</p> <p>content2</p> </Timeline.Item> <Timeline.Item ='2017-10-27'> <p>content3</p> <p>content3</p> </Timeline.Item></Timeline>
Props
Timeline
时间轴。
Name | Type | Required | Default | Comments |
---|---|---|---|---|
className | String | false | 无 | 额外类名 |
pending | jsx | false | 无 | 指定最后一个幽灵节点内容 |
Timeline.Item
时间轴的每一个节点。
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 | 无 | 节点的标题 |