mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-22 22:48:29 +08:00
2.7 KiB
2.7 KiB
category | group | title | description | cover | coverDark | demo | ||
---|---|---|---|---|---|---|---|---|
Components | Data Display | Timeline | Vertical display timeline. | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*FkTySqNt3sYAAAAAAAAAAAAADrJ8AQ/original | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*yIl9S4hAIBcAAAAAAAAAAAAADrJ8AQ/original |
|
When To Use
- When a series of information needs to be ordered by time (ascending or descending).
- When you need a timeline to make a visual connection.
:::info{title="Upgrade Tip"}
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>
);
Examples
Basic
Color
Last node and Reversing
Alternate
Custom
Right alternate
Label
Wireframe
Component Token
API
Common props ref:Common props
Timeline
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 |
Items
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 |
- |