VDivider API

Props

name	type	default
`color`	string	undefined
Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the colors page.
`content-offset` New in v3.11.0	string \| number \| (string \| number)[]	undefined
Increases content spacing from the lines. When passed as an array, the second value shifts slot content down (or right in vertical mode).
`gradient` New in v3.11.0	boolean	false
Adds fading effect for both sides.
`inset`	boolean	false
Adds indentation (72px) for normal dividers, reduces max height for vertical.
`length`	string \| number	undefined
Sets the dividers length. Default unit is px.
`opacity`	string \| number	undefined
Sets the component’s opacity value
`theme`	string	undefined
Specify a theme for this component and all of its children.
`thickness`	string \| number	undefined
Sets the dividers thickness. Default unit is px.
`variant` New in v3.11.0	'dashed' \| 'dotted' \| 'double' \| 'solid'	'solid'
Applies `border-style`.
`vertical`	boolean	false
Displays dividers vertically.

Slots

never

`default`
The default Vue slot.

SASS Variables

name	default
`$divider-border`	( $divider-border-color, $divider-border-style, $divider-border-width )
`$divider-border-color`	null
`$divider-border-style`	settings.$border-style-root
`$divider-border-width`	thin 0 0 0
`$divider-content-padding`	0 16px
`$divider-content-vertical-padding`	4px 0
`$divider-flex`	1 1 100%
`$divider-gradient-mask`	linear-gradient(90deg, transparent, #000, transparent)
`$divider-inset-margin`	72px
`$divider-inset-max-width`	calc(100% - #{$divider-inset-margin})
`$divider-margin`	8px
`$divider-opacity`	var(--v-border-opacity)
`$divider-vertical-border-width`	0 thin 0 0
`$divider-vertical-gradient-mask`	linear-gradient(0deg, transparent, #000, transparent)
`$divider-vertical-inset-margin-bottom`	$divider-margin
`$divider-vertical-inset-margin-top`	$divider-margin
`$divider-vertical-inset-max-height`	calc(100% - #{$divider-margin * 2})
`$divider-vertical-margin-left`	-1px

#VDivider API