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

title	lang
Timeline	en-US

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 API

Timeline Slots

Name	Description	Subtags
default	customize default content for timeline	Timeline-Item

Timeline-Item API

Timeline-Item Attributes

Name	Description	Type	Default
timestamp	timestamp content	^[string]	''
hide-timestamp	whether to show timestamp	^[boolean]	false
center	whether vertically centered	^[boolean]	false
placement	position of timestamp	^[enum]'top' | 'bottom'	bottom
type	node type	^[enum]'primary' | 'success' | 'warning' | 'danger' | 'info'	''
color	background color of node	^[enum]'hsl' | 'hsv' | 'hex' | 'rgb'	''
size	node size	^[enum]'normal' | 'large'	normal
icon	icon component	^[string] / ^[Component]	—
hollow	icon is hollow	^[boolean]	false

Timeline-Item Slots

Name	Description
default	customize default content for timeline item
dot	customize defined node for timeline item