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 | 时间戳的位置 | String | bottom |
TimelineItem 属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| timestamp | 时间戳 | String | - |
| icon | 自定义图标 | String | - |
| iconColor | 图标颜色 | String | - |
| hideTimestamp | 是否隐藏时间戳 | Boolean | false |
| hollow | 是否为空心节点 | Boolean | false |
| type | 节点类型 | String | - |
TimelineItem 插槽
| 插槽名 | 说明 |
|---|---|
| default | 时间线内容 |