A component as overlay to display messages
Props
| Prop name | Description | Type | Values | Default |
|---|
| show | could be used to control visibility | boolean | - | false |
| title | pop up header text | string | - | 'Pop Up' |
| descriptionElementId | specify the id of the element containing a description - for accessibility only | string | - | '' |
| buttonLeftText | text shown in left button | string | - | 'Cancel' |
| buttonRightText | text shown in right button | string | - | 'Submit' |
| buttonLeftIcon | icon shown in left button | string | - | 'remove' |
| buttonRightIcon | icon shown in right button | string | - | 'check-mark' |
| buttonRightDisabled | disable right button | boolean | - | false |
| isLoading | if true button loader will be shown | boolean | - | false |
| isOpenFocus | selector to focus if popup is open | string | - | '' |
| fullscreenOnMobile | specify to render component with max height and width | boolean | - | false |
Events
| Event name | Properties | Description |
|---|
| close | | Event triggered on right top corner close action |
| button-right | | Event triggered with right button |
| button-left | | Event triggered with left button |
Slots
| Name | Description | Bindings |
|---|
| default | slot to fill the body of the box with custom content | |
| button-row | custom button row | |
Demo
A basic example