垂直展示的时间流信息。
# 何时使用
- 当有一系列信息需按时间排列时,可正序和倒序。
- 需要有一条时间轴进行视觉上的串联时。
import { HiTimeline } from 'hi-kits/timeline'
1
# 基本用法
基本的时间轴。
Copy
# 交替展现
内容在时间轴两侧交替出现。
解决初始网络问题 1
解决初始网络问题 2
解决初始网络问题 3 2022-06-01
Copy
# 切换展示
时间和内容分别展示在主轴的两侧
解决初始网络问题 1
解决初始网络问题 2
解决初始网络问题 3
Copy
# 自定义时间轴点
可以设置为图标或其他自定义元素。
Copy
# h-timeline
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
mode | 可以改变时间轴和内容的相对位置 | string | left | alternate | right | custom | right |
# h-timeline-item
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
label | 时间轴内容 | string | - | - |
color | 指定圆圈颜色 'blue' | 'red' | 'green' | 'gray' ,或自定义的色值 (CSS 颜色) | string | - | - |