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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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.
Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at. Est et nobis iisque percipit, an vim zril disputando voluptatibus, vix an salutandi sententiae.
Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at. Est et nobis iisque percipit, an vim zril disputando voluptatibus, vix an salutandi sententiae.
Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at. Est et nobis iisque percipit, an vim zril disputando voluptatibus, vix an salutandi sententiae.
Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at. Est et nobis iisque percipit, an vim zril disputando voluptatibus, vix an salutandi sententiae.
Size
The size prop allows you to customize the size of each dot.
Title 1
Title 2
Title 3
Title 4
Title 5
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.