# 时间轴 Timeline

- 页面: https://jiguang132.com/zh/resources/arco-design/docs/timeline
- 资源: Arco Design (https://jiguang132.com/zh/resources/arco-design.md)
- 全部指南: https://jiguang132.com/zh/resources/arco-design/docs.md

按照时间顺序或倒序规则的展示信息内容。

## 安装

```bash
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 |`-`|

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt