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.