Timeline 时间线
回首过往
基础用法
使用 time 指定事件的时间戳。时间戳默认在事件的下方, 你可以使用 placement控制它相对于事件的位置,当前仅支持调整在事件上方, 未来可能新增更多可选值。
不同的状态
使用 type可以设置子项的状态。该选项相当于同时设置了icon、color属性
表现形式
使用 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 | 时间线子项的时间戳 | String | Unknown time |
| placement | 时间线子项时间戳的位置 | 'start' | 'end' | start |
| icon | 时间线子项的图标 | String | --- |
| color | 时间线子项的颜色 | String | --- |
| variant | 时间线子项的表现形式 | 'empty' | --- |
TimelineItem Slots
| 名称 | 说明 |
|---|---|
| default | 默认槽 |