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 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 |