Divider
Use as a separator between content.
<script setup lang="ts">import { VDivider } from '@vonage/vivid-api-vue';</script>
<template> <VDivider /></template>import { registerDivider } from '@vonage/vivid-api';
registerDivider('your-prefix');<script type="module"> import { registerDivider } from '@vonage/vivid-api'; registerDivider('your-prefix');</script>
<your-prefix-divider></your-prefix-text-divider>The role attribute in the divider component will be deprecated.
According to accessibility review - dividers shall not be announced by screen readers.
The role attribute to express the semantic value of the divider. If it is being use purely for decorative purposes, set it to presentation.
See the Decorative Divider use case.
<script setup lang="ts">import { VDivider } from '@vonage/vivid-api-vue';</script>
<template> <VDivider role="presentation" /></template><vwc-divider role="presentation"></vwc-divider>| Property | Type | Default | Description |
|---|---|---|---|
| appearance | 'ghost' | 'subtle' | The appearance of the divider. | |
| orientation | 'horizontal' | 'vertical' | The orientation of the divider. |
| Property | Type | Default | Description |
|---|---|---|---|
| appearance | 'ghost' | 'subtle' | The appearance of the divider. | |
| orientation | 'horizontal' | 'vertical' | The orientation of the divider. |