Timeline 时间轴

使用场景

  • 当有一系列信息需要从上至下按时间排列时。
  • 需要有一条时间轴进行视觉上的串联。

基本用法

tilte 属性设置时间轴的文字描述,time 设置时间,state 设置节点状态。

Loading demo...

APIs

Timeline

参数说明类型默认值
fold自定义折叠选项 示例[{foldArea: [startIndex, endIndex], foldShow: boolean}]Array[]

Timeline.Item

参数说明类型默认值
state节点状态

可选值:
'done', 'process', 'error', 'success'
Enum'done'
icon图标String-
dot自定义时间轴节点ReactNode-
time格式化后的时间ReactNode-
title标题ReactNode-
timeLeft左侧时间ReactNode-
content右侧内容ReactNode-
animation动画Booleantrue

Demo

设置节点不同状态

Loading demo...

可折叠

Loading demo...

设置 timeLeft

Loading demo...

自定义节点

Loading demo...