import Dialog from 'primevue/dialog';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
Dialog is used as a container and visibility is managed with visible property that requires the v-model for two-way binding.
<Dialog header="Header" v-model:visible="display" >
Content
</Dialog>
export default {
data() {
return {
display: false
}
}
}
Header and Footer sections are defined using properties with the same name that accept simple strings or with the header and footer templates for custom content.
<Dialog header="Header" footer="Footer" v-model:visible="display">
Content
</Dialog>
<Dialog v-model:visible="display">
<template #header>
<h3>Header</h3>
</template>
Content
<template #footer>
<Button label="No" icon="pi pi-times" class="p-button-text"/>
<Button label="Yes" icon="pi pi-check" autofocus />
</template>
</Dialog>
Dialog location is controlled with the position property whose default value is center. Other valid values are top", "bottom", "left", "right", "topleft", "topright", "bottomleft" and "bottomright".
<Dialog position="top" v-model:visible="display">
Content
</Dialog>
Dialog width can be adjusted per screen size with the breakpoints option. In example below, default width is set to 50vw and below 961px, width would be 75vw and finally below 641px width becomes 100%. The value of breakpoints should be an object literal whose keys are the maximum screen sizes and values are the widths per screen.
<Dialog v-model:visible="display" :breakpoints="{'960px': '75vw', '640px': '100vw'}" :style="{width: '50vw'}">
Content
</Dialog>
Adding autofocus to an element in the dialog makes it the initial focus target when dialog gets shown.
<Dialog v-model:visible="display">
Content
<template #footer>
<Button label="No" />
<Button label="Yes" autofocus/>
</template>
</Dialog>
| Name | Type | Default | Description |
|---|---|---|---|
| header | any | null | Title content of the dialog. |
| footer | any | null | Footer content of the dialog. |
| visible | boolean | false | Specifies the visibility of the dialog. |
| modal | boolean | null | Defines if background should be blocked when dialog is displayed. |
| closeOnEscape | boolean | true | Specifies if pressing escape key should hide the dialog. |
| dismissableMask | boolean | false | Specifies if clicking the modal background should hide the dialog. |
| position | string | center | Position of the dialog, options are "center", "top", "bottom", "left", "right", "topleft", "topright", "bottomleft" or "bottomright". |
| contentStyle | object | null | Style of the content section. |
| contentClass | string | null | Style class of the content section. |
| rtl | boolean | null | When enabled dialog is displayed in RTL direction. |
| closable | boolean | true | Adds a close icon to the header to hide the dialog. |
| showHeader | boolean | true | Whether to show the header or not. |
| baseZIndex | number | 0 | Base zIndex value to use in layering. |
| autoZIndex | boolean | true | Whether to automatically manage layering. |
| ariaCloseLabel | string | close | Aria label of the close icon. |
| maximizable | boolean | false | Whether the dialog can be displayed full screen. |
| breakpoints | object | null | Object literal to define widths per screen size. |
| draggable | boolean | true | Enables dragging to change the position using header. |
| minX | number | 0 | Minimum value for the left coordinate of dialog in dragging. |
| minY | number | 0 | Minimum value for the top coordinate of dialog in dragging. |
| keepInViewport | boolean | true | Keeps dialog in the viewport when dragging. |
| appendTo | string | body | 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. |
| Name | Parameters | Description |
|---|---|---|
| hide | - | Callback to invoke when dialog is hidden. |
| after-hide | - | Callback to invoke after dialog is hidden. |
| show | - | Callback to invoke when dialog is showed. |
| maximize | event: Event object | Fired when a dialog gets maximized. |
| unmaximize | event: Event object | Fired when a dialog gets unmaximized. |
| dragend | event: Event object | Fired when a dialog drag completes.. |
| Name | Parameters |
|---|---|
| header | - |
| footer | - |
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-dialog | Container element. |
| p-dialog-titlebar | Container of header. |
| p-dialog-title | Header element. |
| p-dialog-titlebar-icon | Icon container inside header. |
| p-dialog-titlebar-close | Close icon element. |
| p-dialog-content | Content element |
None.