Dividers
The v-divider component is used to separate sections of lists or layouts.
Usage
Dividers in their simplest form display a horizontal line.
<v-divider></v-divider>This example uses the border-opacity utility class and is not available when $utilities is set to false. More information regarding utility classes is located on the SASS variables page.
API
| Component | Description |
|---|---|
| v-divider | The divider component. |
Examples
Props
Inset
Inset dividers are moved 72px to the right. This will cause them to line up with list items.
Gradient
Easily enable fading effect with gradient prop for a modern look.
Vertical
Vertical dividers give you more tools for unique layouts.
verticalvertical and insetSlots
Default
When you pass any content to be placed in between dividers simply by utilizing the default slot.
Misc
Portrait View
Create custom cards to fit any use-case.
Subheaders
Dividers and subheaders can help break up content and can optionally line up with one another by using the same inset prop.
Accessibility
By default, v-divider components are assigned the WAI-ARIA role of separator which denotes that the divider “separates and distinguishes sections of content or groups of menu items.” However, sometimes a divider is just a way to make an interface look nice. In those cases, the role of presentation should be used which denotes “an element whose implicit native role semantics will not be mapped to the accessibility API.” To override the default separator role in a v-divider, simply add a role="presentation" prop to your component. In addition, v-divider components have an aria-orientation="horizontal". If vertical="true", then aria-orientation="vertical" will be set automatically as well. If role="presentation", aria-orientation="undefined", its default value.