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
| Name | Type | Default | Description |
|---|---|---|---|
dashed | boolean | false | Determines whether the timeline is rendered with a dashed style. |
horizontal | boolean | false | Determines whether the timeline is rendered in a horizontal layout. |
Slots
| Name | Description |
|---|---|
default | The default slot is used to render the timeline items. |
divider | The 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.
Morpheme