Divider
Use as a separator between content.
import '@vonage/vivid/divider';
or, if you need to use a unique prefix:
import { registerDivider } from '@vonage/vivid';
registerDivider('your-prefix');
<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<script type="module">
import { registerDivider } from 'vivid-bundle';
registerDivider('your-prefix');
</script>
<your-prefix-divider></your-prefix-text-divider>
<script setup lang="ts">
import { VDivider } from '@vonage/vivid-vue';
</script>
<template>
<VDivider />
</template>
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.
<!-- Feel free to edit the code below. The live preview will update as you make changes. --> <vwc-divider role="presentation"></vwc-divider>
| Name | Type | Description |
|---|---|---|
| orientation | horizontal (default), vertical |
Controls the orientation |
| role | separator (default), presentation |
Controls the semantic role |