Timeline
Timeline
Vertical display timeline.
Importimport { Timeline } from "antd"; |
Sourcecomponents/timeline |
- Components Overview
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
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.
// 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>);
Common props ref：Common props
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| mode | By sending alternate the timeline will distribute the nodes to the left and right | left | alternate | right | - | |
| pending | Set the last ghost node's existence or its content | ReactNode | false | |
| pendingDot | Set the dot of the last ghost node when pending is true | ReactNode | <LoadingOutlined /> | |
| reverse | Whether reverse nodes or not | boolean | false | |
| items | Each node of timeline | Items[] | - | 5.2.0 |
Node of timeline.
| Property | Description | Type | Default |
|---|---|---|---|
| color | Set the circle's color to blue, red, green, gray or other custom colors | string | blue |
| dot | Customize timeline dot | ReactNode | - |
| label | Set the label | ReactNode | - |
| children | Set the content | ReactNode | - |
| position | Customize node position | left | right | - |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| dotBg | Background color of node | string | #ffffff |
| dotBorderWidth | Border width of node | string | number | 2 |
| itemPaddingBottom | Bottom padding of item | number | 20 |
| tailColor | Line color | string | rgba(5,5,5,0.06) |
| tailWidth | Line width | string | number | 2 |
Basic timeline.
When the timeline is incomplete and ongoing, put a ghost node at last. Set pending as truthy value to enable displaying pending item. You can customize the pending content by passing a React Element. Meanwhile, pendingDot={a React Element} is used to customize the dot of the pending item. reverse={true} is used for reversing nodes.
Set a node as an icon or other custom element.
Use label show time alone.
Set the color of circles. green means completed or success status, red means warning or error, and blue means ongoing or other default status, gray for unfinished or disabled status.
Alternate timeline.
Right alternate timeline.
Solve initial network problems 1
Solve initial network problems 2
Solve initial network problems 3 2015-09-01
Technical testing 1
Technical testing 2
Technical testing 3 2015-09-01
Technical testing 1
Technical testing 2
Technical testing 3 2015-09-01
Technical testing 1
Technical testing 2
Technical testing 3 2015-09-01
Custom color testing
