Timeline 时间线
可视化地呈现时间流信息。
基础用法
Timeline
可拆分成多个按照时间戳正序或倒序排列的 activity, 时间戳是其区分于其他控件的重要特征,使⽤时注意与 Steps
步骤条等区分。
倒序
正序
⾃定义节点样式
可根据实际场景⾃定义节点尺⼨、颜⾊,或直接使⽤图标。
⾃定义时间戳
当内容在垂直⽅向上过⾼时,可将时间戳置于内容之上。
API
Timeline Props
属性 | 描述 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
reverse | 指定节点排序方向,默认为正序 | boolean | - | false |
TimelineItem Props
属性 | 描述 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
timestamp | 时间戳 | string | - | - |
hide-timestamp | 是否隐藏时间戳 | boolean | - | false |
placement | 时间戳位置 | string | top/bottom | bottom |
type | 节点类型 | string | primary/success/warning/danger/info | - |
color | 节点颜色 | string | hsl/hsv/hex/rgb | - |
icon | 节点图标 | string | - | - |
TimelineItem Slot
slot 名称 | 描述 |
---|---|
default | Timeline-Item 的内容 |
dot | 自定义节点 |