mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-29 03:48:26 +08:00
121efd1f4c
added a new prop to timeline called mode where you can send 'alternate' to change the timeline design and 'right' to flip horizontally.
44 lines
1.3 KiB
Markdown
44 lines
1.3 KiB
Markdown
---
|
|
category: Components
|
|
type: Data Display
|
|
title: Timeline
|
|
---
|
|
|
|
Vertical display timeline.
|
|
|
|
## When To Use
|
|
|
|
- When a series of information needs to be ordered by time (ascend or descend).
|
|
- When you need a timeline to make a visual connection.
|
|
|
|
## API
|
|
|
|
```jsx
|
|
<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 | `<Icon type="loading" />` |
|
|
| 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` | `left` |
|
|
|
|
### Timeline.Item
|
|
|
|
Node of timeline
|
|
|
|
| Property | Description | Type | Default |
|
|
| -------- | ----------- | ---- | ------- |
|
|
| color | Set the circle's color to `blue`, `red`, `green` or other custom colors | string | `blue` |
|
|
| dot | Customize timeline dot | string\|ReactNode | - |
|