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.

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 API

Timeline Slots

NameDescriptionSubtags
defaultcustomize default content for timelineTimeline-Item

Timeline-Item API

Timeline-Item Attributes

NameDescriptionTypeDefault
timestamptimestamp contentstring''
hide-timestampwhether to show timestampbooleanfalse
centerwhether vertically centeredbooleanfalse
placementposition of timestampenumbottom
typenode typeenum''
colorbackground color of nodeenum''
sizenode sizeenumnormal
iconicon componentstring / Component
hollowicon is hollowbooleanfalse

Timeline-Item Slots

NameDescription
defaultcustomize default content for timeline item
dotcustomize defined node for timeline item

Source

ComponentDocs

Contributors