Timeline
时间轴

垂直展示的时间流信息。

使用import { Timeline } from "antd";

源码components/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...

等待及排序

节点支持 loading 属性表示加载，reverse 属性用于控制节点排序。

Init
Start
Pending
Complete

Init
Start
Pending
Complete

Init
Start
Pending
Complete

水平布局

水平方向的时间线。

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

另一侧时间轴点

时间轴点可以在另一侧。

titleSpan = 100px

05:10
Create a services
09:03
Solve initial network problems
Technical testing
11:28
Network problems being solved

titleSpan = 25%

05:10
Create a services
09:03
Solve initial network problems
Technical testing
11:28
Network problems being solved

titleSpan = 18, mode = end

05:10
Create a services
09:03
Solve initial network problems
Technical testing
11:28
Network problems being solved

标题占比

使用 titleSpan 设置标题占比空间。

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

变体样式

通过 variant 设置时间轴的样式。

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

自定义时间轴点

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

StartEndAlternate

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

标题

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

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

语义化自定义

通过语义化结构，可以实现更丰富的定制样式。

API

通用属性参考：通用属性

Timeline

参数	说明	类型	默认值
items	选项配置	Items[]	-
mode	通过设置 `mode` 可以改变时间轴和内容的相对位置	`start` \| `alternate` \| `end`	`start`
orientation	设置时间轴的方向	`vertical` \| `horizontal`	`vertical`
~~pending~~	指定最后一个幽灵节点是否存在或内容，请使用 `item.loading` 代替	ReactNode	false
~~pendingDot~~	当最后一个幽灵节点存在時，指定其时间图点，请使用 `item.icon` 代替	ReactNode	<LoadingOutlined />
reverse	节点排序	boolean	false
titleSpan	设置标题占比空间，为到 dot 中心点距离预览	number \| string	12
variant	设置样式变体	`filled` \| `outlined`	`outlined`

Items

时间轴的每一个节点。

参数	说明	类型	默认值
color	指定圆圈颜色 blue、red、green、gray，或自定义的色值	string	blue
content	设置内容	ReactNode	-
~~children~~	设置内容，请用 `content` 代替	ReactNode	-
~~dot~~	自定义时间轴点，请用 `icon` 代替	ReactNode	-
icon	自定义节点图标	ReactNode	-
~~label~~	设置标签，请用 `title` 代替	ReactNode	-
loading	设置加载状态	boolean	false
position	自定义节点位置	`start` \| `end`	-
title	设置标题	ReactNode	-

Semantic DOM

Timeline

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

root
根元素
item
节点元素
itemWrapper
节点内裹元素
itemIcon
节点图标元素
itemSection
节点区域元素
itemHeader
节点头部元素
itemTitle
节点标题元素
itemContent
节点内容元素
itemRail
节点连接线元素

Timeline Items

2015-09-01 09:12:11
Solve initial network problems
2015-09-01 11:11:11
Technical testing

root
根元素
wrapper
节点内裹元素
icon
节点图标元素
section
节点区域元素
header
节点头部元素
title
节点标题元素
content
节点内容元素
rail
节点连接线元素

主题变量（Design Token）

组件 Token如何定制？

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

全局 Token如何定制？

文档贡献者

API

通用属性参考：通用属性

Timeline

参数	说明	类型	默认值
items	选项配置	Items[]	-
mode	通过设置 `mode` 可以改变时间轴和内容的相对位置	`start` \| `alternate` \| `end`	`start`
orientation	设置时间轴的方向	`vertical` \| `horizontal`	`vertical`
~~pending~~	指定最后一个幽灵节点是否存在或内容，请使用 `item.loading` 代替	ReactNode	false
~~pendingDot~~	当最后一个幽灵节点存在時，指定其时间图点，请使用 `item.icon` 代替	ReactNode	<LoadingOutlined />
reverse	节点排序	boolean	false
titleSpan	设置标题占比空间，为到 dot 中心点距离预览	number \| string	12
variant	设置样式变体	`filled` \| `outlined`	`outlined`

Items

时间轴的每一个节点。

参数	说明	类型	默认值
color	指定圆圈颜色 blue、red、green、gray，或自定义的色值	string	blue
content	设置内容	ReactNode	-
~~children~~	设置内容，请用 `content` 代替	ReactNode	-
~~dot~~	自定义时间轴点，请用 `icon` 代替	ReactNode	-
icon	自定义节点图标	ReactNode	-
~~label~~	设置标签，请用 `title` 代替	ReactNode	-
loading	设置加载状态	boolean	false
position	自定义节点位置	`start` \| `end`	-
title	设置标题	ReactNode	-

Token 名称

描述

类型

默认值

dotBg

节点背景色

string

dotBorderWidth

节点边框宽度

string | number

dotSize

节点大小

string | number

itemPaddingBottom

时间项下间距

number

tailColor

轨迹颜色

string

rgba(5,5,5,0.06)

tailWidth

轨迹宽度

string | number

Timeline时间轴

Timeline时间轴

何时使用

代码演示

titleSpan = 100px

titleSpan = 25%

titleSpan = 18, mode = end

API

Timeline

Items

Semantic DOM

Timeline

root

item

itemWrapper

itemIcon

itemSection

itemHeader

itemTitle

itemContent

itemRail

Timeline Items

root

wrapper

icon

section

header

title

content

rail

主题变量（Design Token）

何时使用

代码演示

titleSpan = 100px

titleSpan = 25%

titleSpan = 18, mode = end

API

Timeline

Items

Semantic DOM

Timeline

root

item

itemWrapper

itemIcon

itemSection

itemHeader

itemTitle

itemContent

itemRail

Timeline Items

root

wrapper

icon

section

header

title

content

rail

主题变量（Design Token）

Timeline
时间轴

Timeline
时间轴