Timelines
The v-timeline is useful for stylistically displaying chronological information.
API
| Component | Description |
|---|---|
| v-timeline | Primary Component |
| v-timeline-item | Sub-component used to display a single timeline item |
Examples
Props
Direction
Switch between a horizontal and vertical timeline in real-time using the direction prop.
Side
Use the side property to force all items to one side of the timeline.
Alignment
By default, v-timeline-item content is vertically aligned center. The align prop also supports top alignment.
Dot color
Colored dots create visual breakpoints that make your timelines easier for users to read.
Icon dots
Use icons within the v-timeline-item dot to provide additional context.
Size
The size prop allows you to customize the size of each dot.
Truncated line
Truncate the start, end or both ends of the timeline center line by using the truncate-line prop.
Line inset
Modify the inset of dividing lines by specifying a custom amount using the line-inset prop.
Slots
Icon
Insert avatars into dots with use of the icon slot and v-avatar.
Opposite
The opposite slot provides an additional layer of customization within your timelines.