- Dialog is used as a container and visibility is managed with visible property where onHide event is required to update the visibility state. -
-- Header and Footer sections are defined using properties with the same name that accept simple strings or JSX for custom content. In addition icons property enables adding more icons at the header section. -
-- 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. -
- -- Dynamic content may move the dialog boundaries outside of the viewport. Common solution is defining max-height via contentStyle so longer content displays a scrollbar. -
- -| Name | -Type | -Default | -Description | -
|---|---|---|---|
| id | -string | -null | -Unique identifier of the element. | -
| 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. | -
| position | -string | -center | -Position of the dialog, options are "center", "top", "bottom", "left", "right", "top-left", "top-right", "bottom-left" or "bottom-right". | -
| modal | -boolean | -true | -Defines if background should be blocked when dialog is displayed. | -
| resizable | -boolean | -true | -Enables resizing of the content. | -
| 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. | -
| headerStyle | -object | -null | -Style of the header section. | -
| headerClassName | -string | -null | -Style class of the header section. | -
| contentStyle | -object | -null | -Style of the content section. | -
| contentClassName | -string | -null | -Style class of the content section. | -
| 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. | -
| rtl | -boolean | -false | -When enabled dialog is displayed in RTL direction. | -
| closable | -boolean | -true | -Adds a close icon to the header to hide the dialog. | -
| style | -string | -null | -Inline style of the component. | -
| className | -string | -null | -Style class of the component. | -
| maskStyle | -string | -null | -Inline style of the mask. | -
| maskClassName | -string | -null | -Style class of the mask. | -
| showHeader | -boolean | -true | -Whether to show the header or not. | -
| appendTo | -DOM element | string | -document.body | -- DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located. - | -
| baseZIndex | -number | -0 | -Base zIndex value to use in layering. | -
| maximizable | -boolean | -false | -Whether the dialog can be displayed full screen. | -
| blockScroll | -boolean | -false | -Whether background scroll should be blocked when dialog is visible. | -
| icons | -any | -null | -Custom icons template for the header. | -
| ariaCloseIconLabel | -string | -null | -Defines a string that labels the close icon. | -
| focusOnShow | -boolean | -true | -When enabled, first button receives focus on show. | -
| maximized | -boolean | -false | -When enabled, the dialog is initially displayed full screen. | -
| breakpoints | -object | -null | -Object literal to define widths per screen size. | -
| transitionOptions | -object | -null | -- The properties of{' '} - - CSSTransition - {' '} - can be customized, except for "nodeRef" and "in" properties. - | -
| Name | -Parameters | -Description | -
|---|---|---|
| onHide | -null | -Callback to invoke when dialog is hidden (Required). | -
| onShow | -null | -Callback to invoke when dialog is showed. | -
| onMaximize | -
- event.originalEvent: Browser event - event.maximized: Whether to show the dialog or not on fullscreen. - |
- Callback to invoke when toggle maximize icon is clicked. | -
| onDragStart | -event: Browser event | -Callback to invoke when dialog dragging is initiated. | -
| onDrag | -event: Browser event | -Callback to invoke when dragging dialog. | -
| onDragEnd | -event: Browser event | -Callback to invoke when dialog dragging is completed. | -
| onResizeStart | -event: Browser event | -Callback to invoke when dialog resizing is initiated. | -
| onResize | -event: Browser event | -Callback to invoke while resizing dialog. | -
| onResizeEnd | -event: Browser event | -Callback to invoke when dialog resizing is completed. | -
| onMaskClick | -event: Browser event | -Callback to invoke when the mask is clicked. | -
| onClick | -event: Browser event | -Callback to invoke when dialog is clicked. | -
- Following is the list of structural style classes, for theming classes visit theming page. -
-| 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. -
-- It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding tabIndex would be necessary. -
-- 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 locale API by default, you may use - closeButtonProps to customize the element and override the default aria-label. -
- -| Key | -Function | -
|---|---|
| - tab - | -Moves focus to the next the focusable element within the dialog. | -
| - shift + tab - | -Moves focus to the previous the focusable element within the dialog. | -
| - escape - | -- Closes the dialog if closeOnEscape is true. - | -
| Key | -Function | -
|---|---|
| - enter - | -Closes the dialog. | -
| - space - | -Closes the dialog. | -
None.
-