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.