2016-07-04 10:49:04 +08:00
---
category: Components
2022-11-09 12:28:04 +08:00
group: Data Display
2016-07-04 10:49:04 +08:00
title: Timeline
2024-03-22 14:22:42 +08:00
description: Vertical display timeline.
2022-11-30 20:14:41 +08:00
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*FkTySqNt3sYAAAAAAAAAAAAADrJ8AQ/original
2023-02-09 22:17:31 +08:00
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*yIl9S4hAIBcAAAAAAAAAAAAADrJ8AQ/original
2022-11-09 12:28:04 +08:00
demo:
cols: 2
2016-07-04 10:49:04 +08:00
---
## When To Use
2019-04-20 06:39:34 +08:00
- When a series of information needs to be ordered by time (ascending or descending).
2016-11-29 17:13:24 +08:00
- When you need a timeline to make a visual connection.
2016-07-04 10:49:04 +08:00
2024-01-05 10:12:22 +08:00
<!-- prettier - ignore -->
2024-04-07 17:02:59 +08:00
:::info{title="Upgrade Tip"}
2024-01-05 10:12:22 +08:00
After version 5.2.0, we provide a simpler usage `<Timeline items={[...]} />` with better performance and potential of writing simpler code style in your applications.
Meanwhile, we deprecated the old usage in browser console, we will remove it in antd 6.0.
:::
2023-02-08 10:27:07 +08:00
```jsx
// works when >=5.2.0, recommended ✅
const items = [{ children: 'sample', label: 'sample' }];
return < Timeline items = {items} / > ;
// works when < 5.2.0 , deprecated when > =5.2.0 🙅🏻♀️
return (
< Timeline onChange = {onChange} >
< Timeline.Item > Sample< / Timeline.Item >
< / Timeline >
);
```
2022-11-09 12:28:04 +08:00
## Examples
2022-11-17 17:31:26 +08:00
<!-- prettier - ignore -->
2022-11-09 12:28:04 +08:00
< code src = "./demo/basic.tsx" > Basic< / code >
< code src = "./demo/color.tsx" > Color< / code >
< code src = "./demo/pending.tsx" > Last node and Reversing< / code >
< code src = "./demo/alternate.tsx" > Alternate< / code >
< code src = "./demo/custom.tsx" > Custom< / code >
< code src = "./demo/right.tsx" > Right alternate< / code >
< code src = "./demo/label.tsx" > Label< / code >
2022-12-06 23:14:30 +08:00
< code src = "./demo/wireframe.tsx" debug > Wireframe< / code >
2023-05-22 09:36:14 +08:00
< code src = "./demo/component-token.tsx" debug > Component Token< / code >
2022-11-09 12:28:04 +08:00
2023-02-07 16:16:48 +08:00
## API
2023-08-08 18:27:48 +08:00
Common props ref：
2016-07-04 10:49:04 +08:00
### Timeline
2019-11-21 10:23:34 +08:00
| Property | Description | Type | Default |
2023-02-09 00:19:08 +08:00
| --- | --- | --- | --- |
2020-10-21 10:33:43 +08:00
| mode | By sending `alternate` the timeline will distribute the nodes to the left and right | `left` \| `alternate` \| `right` | - |
2024-02-01 10:36:21 +08:00
| pending | Set the last ghost node's existence or its content | ReactNode | false |
2023-02-09 00:19:08 +08:00
| pendingDot | Set the dot of the last ghost node when pending is true | ReactNode | < LoadingOutlined /> |
2020-07-02 11:56:48 +08:00
| reverse | Whether reverse nodes or not | boolean | false |
2023-02-09 00:19:08 +08:00
| items | Each node of timeline | [Items ](#Items )[] | 5.2.0 |
2016-07-04 10:49:04 +08:00
2023-02-07 16:16:48 +08:00
### Items
2016-07-04 10:49:04 +08:00
2023-02-09 00:19:08 +08:00
Node of timeline.
2016-07-04 10:49:04 +08:00
2019-11-21 10:23:34 +08:00
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| color | Set the circle's color to `blue` , `red` , `green` , `gray` or other custom colors | string | `blue` |
2020-10-09 10:08:52 +08:00
| dot | Customize timeline dot | ReactNode | - |
2020-02-26 17:21:44 +08:00
| label | Set the label | ReactNode | - |
2023-02-07 16:16:48 +08:00
| children | Set the content | ReactNode | - |
2020-10-21 10:33:43 +08:00
| position | Customize node position | `left` \| `right` | - |
2023-04-11 10:25:24 +08:00
## Design Token
< ComponentTokenTable component = "Timeline" > < / ComponentTokenTable >
