Popup
No Close
If noClose is true popup won't be closed by clicking the underlay. and if noCloseButton is true the close button will not be shown.
beforeClose
beforeClose is called when clicking outside of popup (the underlay) or when clicking close button. it recieves the done function as it's first parameter and when it's called the popup will close.
Custom Header & Footer
Header and Footer of the popup is customizable using header and footer named slot.
Full Width
Props
| Name | Type | Required | Default Value | Description |
|---|---|---|---|---|
| active | Boolean | Yes | - | Whether or not the component is currently active. |
| title | String | No | undefined | The title to display in the header. |
| noClose | Boolean | No | undefined | If true, Popup will not be closed by clicking outside of it |
| noCloseButton | Boolean | No | undefined | If true, the component header will not display the close icon |
| fullWidth | Boolean | No | undefined | If true, the component will take up the full width of its parent container. |
| transitionProps | Record<string, any> | No | undefined | any props or events to pass to Transition component |
| teleport | string | No | 'body' | to prop of Teleport component |
| beforeClose | (arg0: done): any | No | undefined | This function is called before closing using close button or clicking underlay. you need to call done from first arugment to close the popup. |
Events
| Name | Arguments | Description |
|---|---|---|
| close | - | When closing. |
Slots
| Name | slot props | description |
|---|---|---|
| default | - | Content of the popup |
| header | - | Header of the popup. |
| footer | - | Footer of the popup. |
Table of Contents