时间轴 Timeline - Ant Design

何时使用

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

升级提示

5.2.0 版本之后，我们提供了更简单的用法 <Timeline items={[...]} /> 以获得更好的性能，使您能在应用中编写更简单的代码。与此同时，我们弃用了旧的用法，并且将在下一个 major 版本中删除它。

// >=5.2.0 可用，推荐的写法 ✅
const items = [{ children: 'sample', label: 'sample' }];
return <Timeline items={items} />;

// <5.2.0 可用，>=5.2.0 时不推荐 🙅🏻‍♀️
return (
  <Timeline onChange={onChange}>
    <Timeline.Item>Sample</Timeline.Item>
  </Timeline>
);

代码演示

Create a services site 2015-09-01
Solve initial network problems 2015-09-01
Technical testing 2015-09-01
Network problems being solved 2015-09-01

基本的时间轴。

Create a services site 2015-09-01
Solve initial network problems 2015-09-01
Technical testing 2015-09-01
Recording...

最后一个及排序

当任务状态正在发生，还在记录过程中，可用幽灵节点来表示当前的时间节点，当 pending 为真值时展示幽灵节点，如果 pending 是 React 元素可用于定制该节点内容，同时 pendingDot 将可以用于定制其轴点。reverse 属性用于控制节点排序，为 false 时按正序排列，为 true 时按倒序排列。

Create a services site 2015-09-01
Solve initial network problems 2015-09-01
Technical testing 2015-09-01
Network problems being solved 2015-09-01

自定义时间轴点

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

LeftRightAlternate

2015-09-01
Create a services
2015-09-01 09:12:11
Solve initial network problems
Technical testing
2015-09-01 09:12:11
Network problems being solved

使用 label 标签单独展示时间。

Create a services site 2015-09-01
Solve initial network problems 2015-09-01
Technical testing 2015-09-01
Network problems being solved 2015-09-01

自定义组件 Token。

Create a services site 2015-09-01
Create a services site 2015-09-01
Solve initial network problems 1
Solve initial network problems 2
Solve initial network problems 3 2015-09-01
Technical testing 1
Technical testing 2
Technical testing 3 2015-09-01
Technical testing 1
Technical testing 2
Technical testing 3 2015-09-01
Technical testing 1
Technical testing 2
Technical testing 3 2015-09-01
Custom color testing

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

Create a services site 2015-09-01
Solve initial network problems 2015-09-01
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Network problems being solved 2015-09-01
Create a services site 2015-09-01
Technical testing 2015-09-01

内容在时间轴两侧轮流出现。

Create a services site 2015-09-01
Solve initial network problems 2015-09-01
Technical testing 2015-09-01
Network problems being solved 2015-09-01

右侧时间轴点

时间轴点可以在内容的右边。

Create a services site 2015-09-01
Solve initial network problems 2015-09-01
Technical testing 2015-09-01
Network problems being solved 2015-09-01

线框风格。

API

通用属性参考：通用属性

Timeline

参数	说明	类型	默认值	版本
mode	通过设置 `mode` 可以改变时间轴和内容的相对位置	`left` \| `alternate` \| `right`	-
pending	指定最后一个幽灵节点是否存在或内容	ReactNode	false
pendingDot	当最后一个幽灵节点存在時，指定其时间图点	ReactNode	<LoadingOutlined />
reverse	节点排序	boolean	false
items	选项配置	Items[]	-	5.2.0

Items

时间轴的每一个节点。

参数	说明	类型	默认值
color	指定圆圈颜色 blue、red、green、gray，或自定义的色值	string	blue
dot	自定义时间轴点	ReactNode	-
label	设置标签	ReactNode	-
children	设置内容	ReactNode	-
position	自定义节点位置	`left` \| `right`	-

主题变量（Design Token）

组件 Token如何定制？

Token 名称	描述	类型	默认值
dotBg	节点背景色	string	#ffffff
dotBorderWidth	节点边框宽度	string \| number	2
itemPaddingBottom	时间项下间距	number	20
tailColor	轨迹颜色	string	rgba(5, 5, 5, 0.06)
tailWidth	轨迹宽度	string \| number	2

全局 Token如何定制？