0.2.6 • Published 7 years ago

uxcore-timeline v0.2.6

Weekly downloads
15
License
MIT
Repository
github
Last release
7 years ago

uxcore-timeline

React timeline

NPM version build status Test Coverage Dependency Status devDependency Status NPM downloads

Sauce Test Status

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

时间轴。

NameTypeRequiredDefaultComments
classNameStringfalse额外类名
pendingjsxfalse指定最后一个幽灵节点内容

Timeline.Item

时间轴的每一个节点。

NameTypeRequiredDefaultComments
classNameStringfalse额外类名
colorStringfalse指定节点的色调 orange, blue, gray, green,或自定义的色值
dotjsxfalse自定义时间轴点
dottedBooleanfalsefalse虚线连接线
activeBooleanfalsefalse指定当前时间节点or处理中状态
titleStringfalse节点的标题