The v-timeline
is useful for stylistically displaying chronological information.
v-timeline
's in their simplest form display a vertical timeline that should contain at least one v-timeline-item
.
Wählen Sie unten Ihren gewünschte Komponente aus und sehen Sie die verfügbaren Attribute, Slots, Ereignisse und Funktionen.
Unten finden Sie eine Sammlung einfacher bis komplexer Beispiele.
The small
prop allows alternate styles to provide a unique design.
Conditionally use icons within the v-timeline-item
's dot to provide additional context.
You can reverse the direction of the timeline items by using the reverse
prop. This works both in default and dense
mode.
If you place a v-card
inside of a v-timeline-item
, a caret will appear on the side of the card.
dense
timelines position all content to the right. In this example, v-alert
replaces the card to provide a different design.
The opposite slot provides an additional layer of customization within your timelines.
Insert avatars into dots with use of the icon
slot and v-avatar
.
Colored dots create visual breakpoints that make your timelines easier to read.
Modular components allow you to create highly customized solutions that just work.