Timeline 时间轴

  • 事件一
    2022-01-01
  • 事件二
    2022-02-01
  • 事件三
    2022-03-01

基础时间轴

时间轴方向

  • 事件一
    2022-01-01
  • 事件二
    2022-02-01
  • 事件三
    2022-03-01
  • 事件四
    2022-04-01

控制排序的时间轴

是否倒序

  • 事件一
    2022-01-01
  • 事件二
    2022-02-01
  • 事件三
    2022-03-01
  • 事件四
    2022-04-01

自定义节点

时间轴样式

  • 事件一
    2022-01-01
  • 事件二
    2022-02-01
  • 事件三
    2022-03-01
  • 事件四
    2022-04-01

自定义内容

  • 事件一
    事件一自定义内容
    2022-01-01
  • 事件二
    事件二自定义内容
    2022-02-01
  • 事件三
    事件三自定义内容
    2022-03-01
  • 事件四
    事件四自定义内容
    2022-04-01

布局方式

时间轴方向

对齐方式

label对齐方式

  • 事件一
    2022-01-01
  • 事件二
    2022-02-01
  • 事件三
    2022-03-01
  • 事件四
    2022-04-01

加载状态

加载中

  • 事件一
    2022-01-01
  • 事件二
    2022-02-01
  • 事件三
    2022-03-01
  • 事件四
    2022-04-01

主题色

  • 已完成的时间
    2022-01-01
  • 成功的时间
    2022-02-01
  • 危险时间
    2022-03-01
  • 告警事件
    2022-04-01
  • 默认的时间
    2022-04-01
  • 自定义主题色
    2022-04-01

Timeline Props

名称类型默认值说明必传
labelAlignStringleft标签信息放在时间轴的位置,mode='alternate' 时生效。纵向时间轴信息位置:左侧、右侧或两侧,默认信息在时间轴右侧。横向时间轴信息位置:上方、下方、两侧。可选项:left/right/alternate/top/bottomN
layoutStringvertical时间轴方向:水平方向、垂直方向。可选项:horizontal/verticalN
modeStringalternate标签与内容文本的位置关系,alternate 为展示在轴两侧,same 为展示在同一侧。可选项:alternate/sameN
reverseBooleanfalse时间轴是否表现为倒序N
themeStringdefault时间轴风格。可选项:default/dotN

TimelineItem Props

名称类型默认值说明必传
contentString / Slot / Function-描述内容。TS 类型:string | TNode通用类型定义N
dotSlot / Function-用于自定义时间轴节点元素。TS 类型:TNode通用类型定义N
dotColorStringprimary时间轴颜色,内置 primary/warning/error/default 四种色值,可传入 16 进制颜色码或 RGB 颜色值.。TS 类型:stringN
labelString / Slot / Function-标签文本内容,可完全自定义。TS 类型:string | TNode通用类型定义N
labelAlignString-标签信息相对于时间轴的位置,在 mode='alternate' 时生效,优先级高于 Timeline.labelAlign。可选项:left/right/top/bottomN
loadingBoolean-是否处在加载状态N
onClickFunctionTS 类型:(context: { e: MouseEvent; item: TdTimelineItemProps }) => void
点击时触发
N

TimelineItem Events

名称参数描述
click(context: { e: MouseEvent; item: TdTimelineItemProps })点击时触发

何时使用

垂直或水平展示的时间流信息,可以正序或者倒序,但不可乱序,将时间节点进行视觉上的串联。

与页面布局相关

对齐方式建议:当采用垂直时间轴时,内容随时间轴所在方位对齐,如时间轴在内容左侧,则内容左对齐;时间轴在内容右侧,则内容右对齐。当采用水平时间轴时,内容与时间节点保持左对齐。


标题字数建议:建议精炼,如文字过多,可采用标题+事件文字描述的方式。

  • alternate
  • same
  • left
  • right
  • alternate
  • top
  • bottom
  • horizontal
  • vertical
  • default
  • dot