VTimeline API

Props

name	type	default
`align`	'start' \| 'center'	'center'
Places the timeline dot at the top or center of the timeline item.
`density`	'default' \| 'comfortable' \| 'compact'	'default'
Adjusts the vertical height used by the component.
`direction`	'vertical' \| 'horizontal'	'vertical'
Display timeline in a vertical or horizontal direction.
`dot-color`	string	undefined
Color of the item dot.
`fill-dot`	boolean	false
Remove outer border of item dot, making the color fill the entire dot.
`hide-opposite`	boolean	undefined
Hide opposite content if it exists.
`icon-color`	string	undefined
Color of the icon.
`justify`	'center' \| 'auto'	'auto'
Places timeline line at the center or automatically on the left or right side.
`line-color`	string	undefined
Color of the timeline line.
`line-inset`	string \| number	0
Specifies the distance between the line and the dot of timeline items.
`line-thickness`	string \| number	2
Thickness of the timeline line.
`side`	'end' \| 'start'	undefined
Display all timeline items on one side of the timeline, either start or end.
`size`	string \| number	'default'
Sets the height and width of the component. Default unit is px. Can also use the following predefined sizes: x-small, small, default, large, and x-large.
`tag`	string \| (new () => any) \| FunctionalComponent	'div'
Specify a custom tag used on the root element.
`theme`	string	undefined
Specify a theme for this component and all of its children.
`truncate-line`	'end' \| 'start' \| 'both'	undefined
Truncate timeline directly at the start or end of the line, or on both ends.

Slots

never

`default`
The default Vue slot.

SASS Variables

name	default
`$timeline-density-comfortable-grid-template-end`	min-content min-content auto
`$timeline-density-comfortable-grid-template-start`	auto min-content min-content
`$timeline-density-compact-grid-template-end`	0 min-content auto
`$timeline-density-compact-grid-template-start`	auto min-content 0
`$timeline-divider-dot-elevation`	0
`$timeline-divider-line-background`	rgba(var(--v-border-color), var(--v-border-opacity))
`$timeline-divider-line-horizontal-width`	var(--v-timeline-line-inset, 0px)
`$timeline-divider-line-thickness`	var(--v-timeline-line-thickness)
`$timeline-dot-border-radius`	50%
`$timeline-dot-border-sizes`	tools.map-deep-merge( ( 'x-small': 6px, 'small': 8px, 'default': 8px, 'large': 8px, 'x-large': 10px, ), $timeline-dot-border-sizes )
`$timeline-dot-divider-background`	rgb(var(--v-theme-surface-light))
`$timeline-dot-size`	38px
`$timeline-inner-dot-divider-background`	rgb(var(--v-theme-on-surface))
`$timeline-inset-divider-line`	var(--v-timeline-line-inset)
`$timeline-inset-line-size`	4px
`$timeline-item-grid-template-auto`	auto min-content auto
`$timeline-item-grid-template-center`	minmax(auto, 50%) min-content minmax(auto, 50%)
`$timeline-item-padding`	24px

#VTimeline API

VTimeline API