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

// 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 🙅🏻‍♀️
<Timeline onChange={onChange}>
  <Timeline.Item>Sample</Timeline.Item>
</Timeline>;

API

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
items	选项配置	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	-