Skip to content

Timeline 时间线 ​

时间线组件用于展示时间流或事件流,垂直展示的时间轴,可用于记录时间发展的内容。

基础用法 ​

基础的时间线组件,展示一系列事件的发生顺序。

使用 x-timeline 和 x-timeline-item 组件来创建基础时间线。

创建项目
2023年1月1日
完成需求分析
2023年2月15日
开始开发阶段
2023年3月10日
完成测试
2023年4月20日
项目上线
2023年5月1日

自定义节点 ​

可以自定义时间线节点的图标和颜色。

通过 icon 属性设置图标,iconColor 属性设置图标颜色。

创建项目
2023年1月1日
完成需求分析
2023年2月15日
开始开发阶段
2023年3月10日
完成测试
2023年4月20日
项目上线
2023年5月1日

时间戳位置 ​

可以调整时间戳在时间线上的位置。

通过 position 属性设置时间戳的位置,可选值为 top、bottom。

时间戳在底部

创建项目
2023年1月1日
完成需求分析
2023年2月15日
开始开发阶段
2023年3月10日

时间戳在顶部

创建项目
2023年1月1日
完成需求分析
2023年2月15日
开始开发阶段
2023年3月10日

空心节点 ​

可以设置时间线节点为空心样式。

通过 hollow 属性设置节点为空心样式。

实心节点(默认)
2023年1月1日
空心节点
2023年2月15日
实心节点
2023年3月10日
空心节点
2023年4月20日
实心节点
2023年5月1日

不同类型节点 ​

可以设置不同类型的节点,用于表示不同状态。

通过 type 属性设置节点类型,可选值为 primary、success、warning、error。

主要类型节点
2023年1月1日
成功类型节点
2023年2月15日
警告类型节点
2023年3月10日
错误类型节点
2023年4月20日
默认类型节点
2023年5月1日

Timeline 属性 ​

属性说明类型默认值
position时间戳的位置Stringbottom

TimelineItem 属性 ​

属性说明类型默认值
timestamp时间戳String-
icon自定义图标String-
iconColor图标颜色String-
hideTimestamp是否隐藏时间戳Booleanfalse
hollow是否为空心节点Booleanfalse
type节点类型String-

TimelineItem 插槽 ​

插槽名说明
default时间线内容