时间轴 Timeline
按照时间顺序或倒序规则的展示信息内容。
安装
npm install @arco-design/web-react@2.66.18
在入口引入 @arco-design/web-react/dist/css/arco.css，用 ConfigProvider 设置语言。React 19 项目还需在入口最先引入 @arco-design/web-react/es/_util/react-19-adapter，否则 Message、Modal 等命令式 API 无法渲染。
示例
- 基础用法：基本用法
- 自定义节点内容：自定义节点内容
- 自定义节点：可以通过属性
dotColor,dotType设置节点的颜色以及节点类型。同时可通过dot直接传入ReactNode自定义节点样式。优先级高于dotColor和dotType - 自定义轴线样式：自定义轴线的示例。
- 幽灵节点：当任务状态正在发生，还在记录过程中，可用幽灵节点来表示当前的时间节点，通过
pendingDot定制其轴点。 - 时间轴展示类型：设置
mode=alternate时将会交替展示内容。同时可以通过设置TimelineItem的positon属性控制时间轴节点的位置. - 纵向时间轴：竖直方向的时间轴。
- 横向时间轴：可以通过
direction设置展示横向时间轴 - 标签文本位置：通过
labelPosition可以设置标签文本的位置。
示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。
API
注意: 非 Timeline.Item 组件将会被过滤掉，不会被展示
Timeline
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| reverse | 是否倒序 | boolean | - |
| direction | 时间轴方向 | 'horizontal' | 'vertical' | vertical |
| labelPosition | 设置标签文本的位置 | 'relative' | 'same' | same |
| mode | 时间轴的展示类型：时间轴在左侧/右侧(垂直方向)、上方/下方（水平方向），或交替出现。 | 'left' | 'right' | 'top' | 'bottom' | 'alternate' | left(vertical) | top(horizontal) |
| pending | 是否展示幽灵节点，设置为 true 时候只展示幽灵节点。传入ReactNode时，会作为节点内容展示。 | boolean | ReactNode | - |
| pendingDot | 可以传入 ReactNode 定制幽灵节点 | ReactNode | <Spin size={12} /> |
| className | 节点类名 | string | string[] | - |
| style | 节点样式 | CSSProperties | - |
Timeline.Item
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| autoFixDotSize | 是否自动适配自定义节点尺寸到 16px | boolean | true |
| dotColor | 节点颜色 | string | - |
| lineColor | 时间轴颜色 | string | - |
| dotType | 节点类型：空心圆/实心圆 | 'hollow' | 'solid' | solid |
| labelPosition | 时间轴节点的位置。 在时间轴组件 mode=alternate 时候生效 | 'relative' | 'same' | - |
| lineType | 时间轴类型：实线/虚线/点状线 | 'solid' | 'dashed' | 'dotted' | solid |
| dot | 自定义节点 | string | ReactNode | - |
| label | 标签文本 | string | ReactNode | - |
| className | 节点类名 | string | string[] | - |
| style | 节点样式 | CSSProperties | - |