mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-15 08:59:15 +08:00
1cb1a7ae58
* feat: css variables to token * chore: rename token * feat: add color token * feat: add debug demo * chore: update snapshot * chore: rename demo * chore: rename token * chore: recover tailWidth * chore: rename token demo filename * chore: update snap * fix: CN-docs * fix: US-docs * chore: rename demo --------- Co-authored-by: zhangjianxiong <zhangjx@tsintergy.com>
2.6 KiB
2.6 KiB
category | group | title | cover | coverDark | demo | ||
---|---|---|---|---|---|---|---|
Components | Data Display | Timeline | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*FkTySqNt3sYAAAAAAAAAAAAADrJ8AQ/original | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*yIl9S4hAIBcAAAAAAAAAAAAADrJ8AQ/original |
|
Vertical display timeline.
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.
// 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
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 | boolean | 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 |
- |