Skip to content

Timeline ​

The VTimeline component is a Vue timeline component that can display a list of events or steps in a vertical or horizontal layout. It provides an optional dashed styling and a customizable divider component to separate the timeline items.

Usage ​

Basic Usage ​

To use the VTimeline component, you can simply include it in your template like this:

Dashed ​

To apply dashed style to the timeline divider, add dashed prop.

Horizontal ​

To change the timeline layout to horizontal, add horizontal prop.

Props ​

NameTypeDefaultDescription
dashedbooleanfalseDetermines whether the timeline is rendered with a dashed style.
horizontalbooleanfalseDetermines whether the timeline is rendered in a horizontal layout.

Slots ​

NameDescription
defaultThe default slot is used to render the timeline items.
dividerThe divider slot can be used to customize the divider component that separates the timeline items. If not provided, the default VTimelineDivider component will be used.

Sub Components ​

CSS Variables ​

None

Storybook ​

View Storybook documentation here.