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.

Custom node

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

Custom timestamp

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

Vertically centered

Timeline-Item is centered vertically.

Timeline Slots

Custom content for timelineTimeline-Item

Timeline-Item Attributes

NameDescriptionTypeAccepted ValuesDefault
timestamptimestamp contentstring
hide-timestampwhether to show timestampbooleanfalse
centerWhether vertically centeredbooleanfalse
placementposition of timestampstringtop / bottombottom
typenode typestringprimary / success / warning / danger / info
colorbackground color of nodestringhsl / hsv / hex / rgb
sizenode sizestringnormal / largenormal
iconicon componentstring | Component
hollowicon is hollowbooleanfalse

Timeline-Item Slots

Custom content for timeline item
dotCustom defined node