mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-02 07:39:36 +08:00
882cec62d6
* docs: Add components overview page * fix detail * remove ContributorsList form overview page * fix components url * improve code style * remove extra file * fix detail * fix lint * fix lint * docs: Finish components overview page * fix lint * docs: Update cover * fix lint * update cover * update menu * improve overview page * refactor code * fix order * update title * add components count * fix overview page ssr bug * move less file * update title margin Co-authored-by: arvinxx <arvinx@foxmail.com>
1.4 KiB
1.4 KiB
| category | type | title | cover |
|---|---|---|---|
| Components | Data Display | Timeline | https://gw.alipayobjects.com/zos/antfincdn/vJmo00mmgR/Timeline.svg |
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.
API
<Timeline>
<Timeline.Item>step1 2015-09-01</Timeline.Item>
<Timeline.Item>step2 2015-09-01</Timeline.Item>
<Timeline.Item>step3 2015-09-01</Timeline.Item>
<Timeline.Item>step4 2015-09-01</Timeline.Item>
</Timeline>
Timeline
Timeline
| Property | Description | Type | Default |
|---|---|---|---|
| pending | Set the last ghost node's existence or its content | boolean|string|ReactNode | false |
| pendingDot | Set the dot of the last ghost node when pending is true | string|ReactNode | <LoadingOutlined /> |
| reverse | reverse nodes or not | boolean | false |
| mode | By sending alternate the timeline will distribute the nodes to the left and right. |
left | alternate | right |
- |
Timeline.Item
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 | string|ReactNode | - |
| position | Customize node position | left | right |
- |
| label | Set the label | ReactNode | - |