代码演示
如何引入
基本用法
节点类型
通过 type 可以设置节点类型，对应原点会变成相应的颜色，可选：
default，ongoing， success， warning， error。自定义节点
可以通过
dot 自定义图标，color 自定义圆点色值。通过设置 children 的样式可以自定义节点样式。时间轴位置
通过
mode 属性可以设置时间的位置，共有 4 种模式可选：left， center， alternate， right。时间轴在左侧（默认）
时间节点在左侧
交替展现
时间轴在右侧
使用 dataSource
API 参考
TimeLine
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| className | 类名 | string | - |
| mode | 通过设置 mode 可以改变时间轴和内容的相对位置 | left|right|center|alternate | left |
| style | 样式 | CSSProperties | - |
| dataSource | 时间轴数据源 v>=1.16.0，支持 content 属性及 TimeLine.Item 的所有属性 | array | - |
TimeLine.Item
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| className | 类名 | string | - | - |
| color | 自定义的圆圈色值 | string | - | - |
| dot | 自定义时间轴点 | ReactNode | - | - |
| extra | 自定义辅助内容 | ReactNode | - | - |
| position | 自定义节点位置，可以覆盖 TimeLine 的模式选项 | left|right | - | - |
| style | 样式 | CSSProperties | - | - |
| time | 时间文本 | string | - | - |
| type | 当前圆圈的模式 | default|ongoing|success|warning|error | default | - |
| onClick | 鼠标点击事件的回调 | (e: MouseEvent) => void | - | 2.2.0 |
Accessibility
ARIA
- 组件中时间点的连线以及时间点本身被设置了
aria-hidden，不会响应 Accessibility API - 可以通过传入
aria-label设置 TimeLine 组件的标签
