Skip to content

Timeline 时间线

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

基础用法

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

使用 x-timelinex-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 属性设置时间戳的位置,可选值为 topbottom

时间戳在底部

创建项目
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 属性设置节点类型,可选值为 primarysuccesswarningerror

主要类型节点
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时间线内容