Ant Design

⌘ K

6.0.0-alpha.3

Timeline
时间轴

垂直展示的时间流信息。

使用import { Timeline } from "antd";

反馈

components/timeline 提交问题待解决

文档

编辑此页

文档贡献者

Tag标签 Tooltip文字提示

Ant Design

⌘ K

6.0.0-alpha.3

Timeline
时间轴

垂直展示的时间流信息。

使用import { Timeline } from "antd";

反馈

components/timeline 提交问题待解决

文档

编辑此页

文档贡献者

Tag标签 Tooltip文字提示

何时使用

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

代码演示

API

通用属性参考：通用属性

Timeline

参数	说明	类型	默认值
classNames	用于自定义组件内部各语义化结构的 class，支持对象或函数	Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>	-
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
styles	用于自定义组件内部各语义化结构的行内 style，支持对象或函数	Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>	-
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
placement	自定义节点位置	`start` \| `end`	-
~~position~~	自定义节点位置，请使用 `placement` 替换	`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
节点区域元素，设置包含头部和内容的区域容器的Flex布局、换行、间距等布局样式
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如何定制？

何时使用

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

代码演示

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 设置标题占比空间。

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

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

自定义语义结构的样式和类

通过 classNames 和 styles 传入对象/函数可以自定义 Timeline 的语义化结构样式。

6.0.0

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

参数	说明	类型	默认值
classNames	用于自定义组件内部各语义化结构的 class，支持对象或函数	Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>	-
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
styles	用于自定义组件内部各语义化结构的行内 style，支持对象或函数	Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>	-
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
placement	自定义节点位置	`start` \| `end`	-
~~position~~	自定义节点位置，请使用 `placement` 替换	`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
节点区域元素，设置包含头部和内容的区域容器的Flex布局、换行、间距等布局样式
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如何定制？

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 设置标题占比空间。

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

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

自定义语义结构的样式和类

通过 classNames 和 styles 传入对象/函数可以自定义 Timeline 的语义化结构样式。

6.0.0

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

语义化自定义

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

Timeline时间轴

Timeline时间轴

何时使用

代码演示

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）

titleSpan = 100px

titleSpan = 25%

titleSpan = 18, mode = end

Timeline
时间轴

Timeline
时间轴