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.