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

代码演示

如何引入

基本用法

节点类型

通过 type 可以设置节点类型,对应原点会变成相应的颜色,可选:defaultongoingsuccesswarningerror

自定义节点

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

时间轴位置

通过 mode 属性可以设置时间的位置,共有 4 种模式可选:leftcenteralternateright

时间轴在左侧(默认)

时间节点在左侧

交替展现

时间轴在右侧

使用 dataSource

API 参考

TimeLine

属性说明类型默认值
className类名string-
mode通过设置 mode 可以改变时间轴和内容的相对位置left|right|center|alternateleft
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|errordefault-
onClick鼠标点击事件的回调(e: MouseEvent) => void-2.2.0

Accessibility

ARIA

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

设计变量

© 2021 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED