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. |
| contentProps | null | null | Uses to pass all properties of the HTMLDivElement to the overlay panel inside the component. |
| 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.
Deprecated: aria.close can be used in defaults to PrimeVue |
| 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. |
| closeIcon | string | pi pi-times | Icon to display in the dialog close button. |
| maximizeIcon | string | pi pi-window-maximize | Icon to display in the dialog maximize button when dialog is not maximized. |
| minimizeIcon | string | pi pi-window-minimize | Icon to display in the dialog maximize button when dialog is maximized. |
| 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 |
Dialog component uses dialog role along with aria-labelledby referring to the header element however any attribute is passed to the root element so you may use aria-labelledby to override this default behavior. In addition aria-modal is added since focus is kept within the popup.
Trigger element also requires aria-expanded and aria-controls to be handled explicitly.
Close element is a button with an aria-label that refers to the aria.close property of the
<Button label="Show" icon="pi pi-external-link" @click="visible = true" :aria-controls="visible ? 'dlg' : null" :aria-expanded="visible ? true : false" />
<Dialog id="dlg" header="Header" v-model:visible="visible" :style="{ width: '50vw' }">
<p>Content</p>
</Dialog>
| Key | Function |
|---|---|
| tab | Moves focus to the next the focusable element within the dialog if modal is true. Otherwise, the focusable element in the page tab sequence. |
| shift + tab | Moves focus to the previous the focusable element within the dialog if modal is true. Otherwise, the focusable element in the page tab sequence. |
| escape | Closes the dialog if closeOnEscape is true. |
| Key | Function |
|---|---|
| enter | Closes the dialog. |
| space | Closes the dialog. |
None.