Timeline 时间轴

垂直展示的时间流信息。

何时使用

  • 当有一系列信息需按时间排列时,可正序和倒序。
  • 需要有一条时间轴进行视觉上的串联时。

代码演示

基本用法

基本的时间轴。

Timeline时间轴 - 图1

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Timeline } from 'choerodon-ui';
  4. ReactDOM.render(
  5. <Timeline>
  6. <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
  7. <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
  8. <Timeline.Item>Technical testing 2015-09-01</Timeline.Item>
  9. <Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
  10. </Timeline>,
  11. document.getElementById('container'));

圆圈颜色

圆圈颜色,绿色用于已完成、成功状态,红色表示告警或错误状态,蓝色可表示正在进行或其他默认状态。

Timeline时间轴 - 图2

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Timeline } from 'choerodon-ui';
  4. ReactDOM.render(
  5. <Timeline>
  6. <Timeline.Item color="green">Create a services site 2015-09-01</Timeline.Item>
  7. <Timeline.Item color="green">Create a services site 2015-09-01</Timeline.Item>
  8. <Timeline.Item color="red">
  9. <p>Solve initial network problems 1</p>
  10. <p>Solve initial network problems 2</p>
  11. <p>Solve initial network problems 3 2015-09-01</p>
  12. </Timeline.Item>
  13. <Timeline.Item>
  14. <p>Technical testing 1</p>
  15. <p>Technical testing 2</p>
  16. <p>Technical testing 3 2015-09-01</p>
  17. </Timeline.Item>
  18. </Timeline>,
  19. document.getElementById('container'));

最后一个

当任务状态正在发生,还在记录过程中,可用幽灵节点来表示当前的时间节点(用于时间正序排列)。当 pending 值为 false ,可用定制元件替换默认时间图点。

Timeline时间轴 - 图3

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Timeline } from 'choerodon-ui';
  4. ReactDOM.render(
  5. <Timeline pending="Recording...">
  6. <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
  7. <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
  8. <Timeline.Item>Technical testing 2015-09-01</Timeline.Item>
  9. </Timeline>,
  10. document.getElementById('container'));

自定义时间轴点

可以设置为图标或其他自定义元素。

Timeline时间轴 - 图4

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Timeline, Icon } from 'choerodon-ui';
  4. ReactDOM.render(
  5. <Timeline>
  6. <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
  7. <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
  8. <Timeline.Item
  9. dot={<Icon type="note" style={{ fontSize: '16px' }} />}
  10. color="red"
  11. >
  12. Technical testing 2015-09-01
  13. </Timeline.Item>
  14. <Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
  15. </Timeline>,
  16. document.getElementById('container'),
  17. );

API

  1. <Timeline>
  2. <Timeline.Item>创建服务现场 2015-09-01</Timeline.Item>
  3. <Timeline.Item>初步排除网络异常 2015-09-01</Timeline.Item>
  4. <Timeline.Item>技术测试异常 2015-09-01</Timeline.Item>
  5. <Timeline.Item>网络异常正在修复 2015-09-01</Timeline.Item>
  6. </Timeline>

Timeline

时间轴。

参数说明类型默认值
pending指定最后一个幽灵节点是否存在或内容boolean|string|ReactNodefalse
pendingDot当最后一个幽灵节点存在時,指定其时间图点|string|ReactNode<Icon type=”loading” />

Timeline.Item

时间轴的每一个节点。

参数说明类型默认值
color指定圆圈颜色 blue, red, green,或自定义的色值stringblue
dot自定义时间轴点string|ReactNode-