Modals (Dialog Component)
Basic usage:
Dialog is a container to display content in an overlay window.
Basic:
Nested Modals:
Position:
Maximizable:
Modal width Popover:
Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| appendTo | A valid query selector or an HTMLElement to specify where the dialog gets attached. Special keywords are "body" for document body and "self" for the element itself | string | 'body' | 'self' | string | undefined | body |
| visible | Specifies the visibility of the dialog. | boolean | true | false | false |
| maximizable | Whether the dialog can be displayed full screen. | boolean | true | false | false |
| position | Position of the dialog. | string | "center", "top", "bottom", "left", "right", "top-left", "top-right", "bottom-left" or "bottom-right" | center |
| header | Title content of the dialog. | string | string | undefined | --- |
| footer | Footer content of the dialog. | string | string | undefined | --- |
| ariaCloseLabel | Aria label of the close icon. | String | --- | close |
| closable | Adds a close icon to the header to hide the dialog. | Boolean | true | false | true |
| closeOnEscape | Specifies if pressing escape key should hide the dialog. | Boolean | true | false | true |
| contentClass | Style class of the content section. | String | --- | --- |
| contentStyle | Style of the content section. | String, Object | --- | null |
| baseZIndex | Base zIndex value to use in layering. | Number | --- | 0 |
| dismissableMask | Specifies if clicking the modal background should hide the dialog. | Boolean | true | false | true |
| breakpoints | Object literal to define widths per screen size. Ex: { '960px': '75vw', '640px': '100vw' } | Object | true | false | undefined |
| width | Default width of dialog window | String | Number | --- | 60vw |
Slots
| Name | Description |
|---|---|
| default | Content of the Dialog |
| header | Header of the Dialog |
| footer | Footer of the Dialog |
Events
| Method | Description | Parameters |
|---|---|---|
| close | Fired when click close action | false |
| show | Callback to invoke when dialog is showed. | |
| hide | Callback to invoke when dialog is hidden. | |
| maximize | Fired when a dialog gets maximized. | Event object |
| unmaximize | Fired when a dialog gets unmaximized. | Event object |