uxcore-timeline

React timeline

Development

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

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 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>

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 | 无 | 节点的标题 |