Divider
Use as a separator between content.
import { registerDivider } from '@vonage/vivid';
registerDivider('your-prefix');
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.
| 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. |
| Event | Type | Description |
|---|---|---|
| blur | FocusEvent |
Fires when the element loses focus. |
| click | MouseEvent |
Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element. |
| focus | FocusEvent |
Fires when the element receives focus. |
| input | Event |
Fires when the value of an element has been changed. |
| keydown | KeyboardEvent |
Fires when a key is pressed. |
| keyup | KeyboardEvent |
Fires when a key is released. |
| Name | Type | Description |
|---|---|---|
| blur | FocusEvent |
Fires when the element loses focus. |
| click | MouseEvent |
Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element. |
| focus | FocusEvent |
Fires when the element receives focus. |
| input | Event |
Fires when the value of an element has been changed. |
| keydown | KeyboardEvent |
Fires when a key is pressed. |
| keyup | KeyboardEvent |
Fires when a key is released. |