Timeline 时间轴 - Semi Design

展示类 · Timeline

时间轴

时间轴是用于对一系列信息进行时间排序时，垂直展示的组件。

API 文档

设计文档

代码演示

如何引入


import { Timeline } from '@douyinfe/semi-ui';

基本用法

节点类型

通过 type 可以设置节点类型，对应原点会变成相应的颜色，可选：default，ongoing， success， warning， error。

自定义节点

可以通过 dot 自定义图标，color 自定义圆点色值。通过设置 children 的样式可以自定义节点样式。

时间轴位置

通过 mode 属性可以设置时间的位置，共有 4 种模式可选：left， center， alternate， right。

时间轴在左侧（默认）

时间节点在左侧

交替展现

时间轴在右侧

使用 dataSource

API 参考

TimeLine

属性	说明	类型	默认值
className	类名	string	-
mode	通过设置 mode 可以改变时间轴和内容的相对位置	`left`\|`right`\|`center`\|`alternate`	`left`
style	样式	CSSProperties	-
dataSource	时间轴数据源 v>=1.16.0，支持 content 属性及 TimeLine.Item 的所有属性	array	-

TimeLine.Item

属性	说明	类型	默认值	版本
className	类名	string	-	-
color	自定义的圆圈色值	string	-	-
dot	自定义时间轴点	ReactNode	-	-
extra	自定义辅助内容	ReactNode	-	-
position	自定义节点位置，可以覆盖 TimeLine 的模式选项	`left`\|`right`	-	-
style	样式	CSSProperties	-	-
time	时间文本	string	-	-
type	当前圆圈的模式	`default`\|`ongoing`\|`success`\|`warning`\|`error`	`default`	-
onClick	鼠标点击事件的回调	(e: MouseEvent) => void	-	2.2.0

Accessibility

ARIA

组件中时间点的连线以及时间点本身被设置了 aria-hidden，不会响应 Accessibility API
可以通过传入 aria-label 设置 TimeLine 组件的标签


<Timeline aria-label="xx事故处理过程时间线">
    <Timeline.Item time="2015-09-01">创建服务现场</Timeline.Item>
    <Timeline.Item time="2015-09-02">初步排除网络异常</Timeline.Item>
    <Timeline.Item time="2015-09-03">技术测试异常</Timeline.Item>
    <Timeline.Item time="2015-09-05">网络异常正在修复</Timeline.Item>
</Timeline>