element-plus/docs/en-US/component/timeline.md

Timeline

Visually display timeline.

Basic usage

Timeline can be split into multiple activities. Timestamps are important features that distinguish them from other components. Note the difference with Steps.

:::demo

timeline/basic

:::

Custom node

Size, color, and icons can be customized in node.

:::demo

timeline/custom-node

:::

Custom timestamp

Timestamp can be placed on top of content when content is too high.

:::demo

timeline/custom-timestamp

:::

Vertically centered

Timeline-Item is centered vertically.

:::demo

timeline/center

:::

Timeline Slots

Name	Description	Subtags
—	Custom content for timeline	Timeline-Item

Timeline-Item Attributes

Attribute	Description	Type	Accepted Values	Default
timestamp	timestamp content	string	—	—
hide-timestamp	whether to show timestamp	boolean	—	false
center	Whether vertically centered	boolean	—	false
placement	position of timestamp	string	top / bottom	bottom
type	node type	string	primary / success / warning / danger / info	—
color	background color of node	string	hsl / hsv / hex / rgb	—
size	node size	string	normal / large	normal
icon	icon class name	string	—	—
hollow	icon is hollow	boolean	—	false

Timeline-Item Slots

Name	Description
—	Custom content for timeline item
dot	Custom defined node