# Timeline

- Page: https://jiguang132.com/resources/arco-design/docs/timeline
- Resource: Arco Design (https://jiguang132.com/resources/arco-design.md)
- All guides: https://jiguang132.com/resources/arco-design/docs.md

Display information content in chronological or reverse order.

## Install

```bash
npm install @arco-design/web-react@2.66.18
```

Import `@arco-design/web-react/dist/css/arco.css` at the entry and set the locale with `ConfigProvider`. React 19 projects must also import `@arco-design/web-react/es/_util/react-19-adapter` first, or imperative APIs such as Message and Modal cannot render.

## Examples

- **Basic**: Basic usage
- **Icon**: Custom node content
- **Dot**: The color and type of the node can be set through the attributes `dotColor`, `dotType`. At the same time, you can directly pass in `ReactNode` to customize node styles through `dot`. Priority is higher than `dotColor` and `dotType`
- **Type**: Example of custom axis.
- **Pending**: When the task state is happening and the recording is still in progress, ghost nodes can be used to represent the current time node, and its pivot point can be customized through `pendingDot`.
- **Mode**: The content will be displayed alternately when `mode=alternate` is set. At the same time, you can control the position of the timeline node by setting the positon property of TimelineItem.
- **Vertical**: The vertical time axis.
- **Direction**: You can set the display horizontal timeline through `direction`
- **Label Position**: The position of the label text can be set by `labelPosition`.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

## API

**Note: Not `Timeline.Item` components will be filtered out and will not be displayed**

### Timeline

|Property|Description|Type|DefaultValue|
|---|---|---|---|
|reverse|Whether Reverse order|boolean |`-`|
|direction|Timeline direction|'horizontal' \| 'vertical' |`vertical`|
|labelPosition|Position of label text|'relative' \| 'same' |`same`|
|mode|The display mode of Timeline|'left' \| 'right' \| 'top' \| 'bottom' \| 'alternate' |`left(vertical) \| top(horizontal)`|
|pending|Whether to display ghost nodes. When set to true, only ghost nodes are displayed. When passed to ReactNode, it will be displayed as node content|boolean \| ReactNode |`-`|
|pendingDot|You can pass in ReactNode to customize the ghost node|ReactNode |`<Spin size={12} />`|
|className|Additional css class|string \| string[] |`-`|
|style|Additional style|CSSProperties |`-`|

### Timeline.Item

|Property|Description|Type|DefaultValue|
|---|---|---|---|
|autoFixDotSize|Whether to automatically adapt the custom node size to 16px|boolean |`true`|
|dotColor|Dot color|string |`-`|
|lineColor|Line Color|string |`-`|
|dotType|Dot type|'hollow' \| 'solid' |`solid`|
|labelPosition|The position of the timeline node. Take effect when set `mode=alternate`|'relative' \| 'same' |`-`|
|lineType|Line type|'solid' \| 'dashed' \| 'dotted' |`solid`|
|dot|Custom Dot|string \| ReactNode |`-`|
|label|Label text|string \| ReactNode |`-`|
|className|Additional css class|string \| string[] |`-`|
|style|Additional style|CSSProperties |`-`|

---

Index of all JGuang resources: https://jiguang132.com/llms.txt