ant-design/components/timeline/index.en-US.md

category	group	title	cover	demo
Components	Data Display	Timeline	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*FkTySqNt3sYAAAAAAAAAAAAADrJ8AQ/original	cols 2

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.

Examples

Basic Color Last node and Reversing Alternate Custom Right alternate Label Wireframe

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
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

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	ReactNode	-
label	Set the label	ReactNode	-
position	Customize node position	left | right	-