Timeline
Importimport{ Timeline }from"antd"; |
Sourcecomponents/timeline |
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 |
---|---|---|---|
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 |
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