Timeline

Show · Timeline

Timeline

Timeline component is used to display a series of information vertically.

Demos

How to import

Basic Usage

Type

You can use type to set the type of a time node, using one of: default,ongoing, success, warning, Error. The corresponding dot will have a corresponding color.

Custom node

You can use dot to customize icon, color to customize color or pass in children with style.

Timeline Position

Use mode to set the position of the timeline, using one of: left, center, alternate, right.

Left (default)

Center

Alternate

Right

DataSource

API reference

Properties	Instruction	type	Default
className	Class name	string	-
mode	The relative Position of the timeline and content	`left`\|`right`\|`center`\|`alternate`	`left`
style	Inline style	CSSProperties	-
dataSource	DataSource array for Timeline v>=1.16.0, Support content attribute and all attributes of TimeLine.Item	array	-

TimeLine.Item

Properties	Instruction	type	Default	Version
className	Class name	string	-	-
color	Color of dot	string	-	-
dot	Custom dot	React Node	-	-
extra	Custom extra content	React Node	-	-
position	Custom node location to override TimeLine's mode setting	`left`\|`right`	-	-
style	Inline style	CSSProperties	-	-
time	Time value	string	-	-
type	Pattern of dot	`default`\|`ongoing`\|`success`\|`warning`\|`error`	`default`	-
onClick	Click event	(e: MouseEvent) => void	-	2.2.0

Accessibility

ARIA

The element of dot and line between dots in TimeLine have a aria-hidden, indicates that they do not support Accessibility API.
Supporting API aria-label to specify TimeLine's label.