Skip to content

Timeline 时间线

可视化地呈现时间流信息。

基础用法

Timeline 可拆分成多个按照时间戳正序或倒序排列的 activity, 时间戳是其区分于其他控件的重要特征,使⽤时注意与 Steps 步骤条等区分。

倒序
正序

⾃定义节点样式

可根据实际场景⾃定义节点尺⼨、颜⾊,或直接使⽤图标。

⾃定义时间戳

当内容在垂直⽅向上过⾼时,可将时间戳置于内容之上。

API

Timeline Props

属性描述类型可选值默认值
reverse指定节点排序方向,默认为正序boolean-false

TimelineItem Props

属性描述类型可选值默认值
timestamp时间戳string--
hide-timestamp是否隐藏时间戳boolean-false
placement时间戳位置stringtop/bottombottom
type节点类型stringprimary/success/warning/danger/info-
color节点颜色stringhsl/hsv/hex/rgb-
icon节点图标string--

TimelineItem Slot

slot 名称描述
defaultTimeline-Item 的内容
dot自定义节点