Divider #
The va-divider component is used to separate sections of lists or layouts.
Examples #
Simple divider #
Dividers in their simplest form display a horizontal line.
Custom content #
You can customize the content on the divider line. Also you can set position of the content by setting the orientation property to left, center or right.
homeI'm a list item
homeI'm a list item
homeI'm a list item
homeI'm a list item
Vertical divider #
Add the vertical attribute in order to set whether or not the divider is vertically-oriented.
Inset divider #
Add the inset attribute in order to set whether or not the divider is an inset divider.
homeI'm a list item
homeI'm a list item
Dashed divider #
Add the dashed attribute in order to set whether or not the divider line is dashed.
homeI'm a list item
homeI'm a list item
homeI'm a list item
Divider with lists #
Dividers perfectly work with va-list.
Accessibility #
Has a role="separator". Its attribute aria-orientation depends on vertical property. Completely ignored by screen readers because of aria-hidden="true" attribute.
API #
Props #
| Name | Description | Types | Default |
|---|---|---|---|
| color |
|
| |
| dashed |
|
| |
| inset |
|
| |
| orientation |
|
| |
| preset |
| - | |
| vertical |
|
|
Slots #
| Name | Description |
|---|---|
default | Insert content (for horizontal only) |
Css Variables #
| Name | Default Value |
|---|---|
| --va-divider-display | flex |
| --va-divider-margin | 0.5rem |
| --va-divider-line-width | 1px |
| --va-divider-border-style | solid |
| --va-divider-text-font-size | 0.875rem |
| --va-divider-text-line-height | 0 |
| --va-divider-text-height | 0 |
| --va-divider-text-vertical-align | middle |
| --va-divider-text-transform | translateY(-50%) |
| --va-divider-text-horizontal-offset | 1.25rem |
| --va-divider-vertical-display | inline-flex |
| --va-divider-inset-horizontal-margin | 1rem |
| --va-divider-inset-margin | 0.5rem var(--va-divider-inset-horizontal-margin) |
| --va-divider-dashed-border-top-style | dashed |