代码演示
如何引入
基本用法
节点类型
通过 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 组件的标签