Timeline 时间轴

垂直展示的时间流信息。

何时使用

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

代码演示

基本用法

基本的时间轴。

import React from 'react';
import ReactDOM from 'react-dom';
import { Timeline } from 'choerodon-ui';
​
ReactDOM.render(
  <Timeline>
    <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
    <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
    <Timeline.Item>Technical testing 2015-09-01</Timeline.Item>
    <Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
  </Timeline>,
  document.getElementById('container'));
​

圆圈颜色

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

import React from 'react';
import ReactDOM from 'react-dom';
import { Timeline } from 'choerodon-ui';
​
ReactDOM.render(
  <Timeline>
    <Timeline.Item color="green">Create a services site 2015-09-01</Timeline.Item>
    <Timeline.Item color="green">Create a services site 2015-09-01</Timeline.Item>
    <Timeline.Item color="red">
      <p>Solve initial network problems 1</p>
      <p>Solve initial network problems 2</p>
      <p>Solve initial network problems 3 2015-09-01</p>
    </Timeline.Item>
    <Timeline.Item>
      <p>Technical testing 1</p>
      <p>Technical testing 2</p>
      <p>Technical testing 3 2015-09-01</p>
    </Timeline.Item>
  </Timeline>,
  document.getElementById('container'));
​

最后一个

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

import React from 'react';
import ReactDOM from 'react-dom';
import { Timeline } from 'choerodon-ui';
​
ReactDOM.render(
  <Timeline pending="Recording...">
    <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
    <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
    <Timeline.Item>Technical testing 2015-09-01</Timeline.Item>
  </Timeline>,
  document.getElementById('container'));
​

自定义时间轴点

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

import React from 'react';
import ReactDOM from 'react-dom';
import { Timeline, Icon } from 'choerodon-ui';
​
ReactDOM.render(
  <Timeline>
    <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
    <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
    <Timeline.Item
      dot={<Icon type="note" style={{ fontSize: '16px' }} />}
      color="red"
    >
      Technical testing 2015-09-01
    </Timeline.Item>
    <Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
  </Timeline>,
  document.getElementById('container'),
);
​

API

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

Timeline

时间轴。

Timeline.Item

时间轴的每一个节点。