Timeline
Display information content in chronological or reverse order.
Install
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 inReactNodeto customize node styles throughdot. Priority is higher thandotColoranddotType - 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=alternateis 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 | - |