Skip to content

Timeline 时间线

回首过往

基础用法

使用 time 指定事件的时间戳。时间戳默认在事件的下方, 你可以使用 placement控制它相对于事件的位置,当前仅支持调整在事件上方, 未来可能新增更多可选值。

不同的状态

使用 type可以设置子项的状态。该选项相当于同时设置了iconcolor属性

表现形式

使用 variant可以设置子项的表现形式, 现仅支持empty选项。

自定义图标&颜色

当不满意type提供的方案时, 你也可以自定义图标和颜色

排列方向

使用 direction指定时间线的排列方向

不同的尺寸

使用 size调整时间线的大小

Timeline API

TimeLine Props

属性名说明可选值默认值
direction时间线的排列方向'horizontal | 'vertical'vertical
size时间线的大小'small' | 'normal' | 'large'normal

Timeline Slots

名称说明
default默认槽

TimelineItem API

TimelineItem Props

属性名说明可选值默认值
type时间线子项的类型'default' | 'success' | 'info' | 'warning' | 'danger'default
time时间线子项的时间戳StringUnknown time
placement时间线子项时间戳的位置'start' | 'end'start
icon时间线子项的图标String---
color时间线子项的颜色String---
variant时间线子项的表现形式'empty'---

TimelineItem Slots

名称说明
default默认槽

源代码

组件

贡献者

Released under the MIT License.