Диалоговое окно

Диалоговое окно - это контейнер для отображения контента во всплывающем окне.

С чего начать

Подключите модуль

import { DialogModule } from 'primeng/dialog';

Basic

Modal

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Responsive

Maximizable

Position

The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. His beloved son Michael has just come home from the war, but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.

Severities

Это базовый диалог. Он такой по умолчанию в теме SoftUIЭтот диалог всячески подсказывает Вам, что вышло все успешноЭтот диалог подсказывает, что что-то может пойти не такЭтот диалог подсказывает, что надо что то удалить или произошла ошибка

Свойства

Name	Type	Default	Description
header	string	null	Title text of the dialog.
draggable	boolean	true	Enables dragging to change the position using header.
keepInViewport	boolean	true	Keeps dialog in the viewport.
resizable	boolean	true	Enables resizing of the content.
contentStyle	object	null	Style of the content section.
visible	boolean	false	Specifies the visibility of the dialog.
modal	boolean	false	Defines if background should be blocked when dialog is displayed.
position	string	center	Position of the dialog, options are "center", "top", "bottom", "left", "right", "top-left", "top-right", "bottom-left" or "bottom-right".
blockScroll	boolean	false	Whether background scroll should be blocked when dialog is visible.
closeOnEscape	boolean	true	Specifices if pressing escape key should hide the dialog.
dismissableMask	boolean	false	Specifices 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.
appendTo	any	null	Target element to attach the dialog, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
style	object	null	Inline style of the component.
styleClass	string	null	Style class of the component.
maskStyleClass	string	null	Style class of the mask.
contentStyle	object	null	Inline style of the content.
contentStyleClass	string	null	Style class of the content.
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.
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.
focusOnShow	boolean	true	When enabled, first button receives focus on show.
focusTrap	boolean	true	When enabled, can only focus on elements inside the dialog.
maximizable	boolean	false	Whether the dialog can be displayed full screen.
breakpoints	object	null	Object literal to define widths per screen size.
transitionOptions	string	150ms cubic-bezier(0, 0, 0.2, 1)	Transition options of the animation.
closeIcon	string	pi pi-times	Name of the close icon.
closeAriaLabel	string	null	Defines a string that labels the close button for accessibility.
closeTabindex	string	null	Index of the close button in tabbing order.
minimizeIcon	string	pi pi-window-minimize	Name of the minimize icon.
maximizeIcon	string	pi pi-window-maximize	Name of the maximize icon.

События

Name	Parameters	Description
onShow	event: Event object	Callback to invoke when dialog is shown.
onHide	event: Event object	Callback to invoke when dialog is hidden.
onResizeInit	event: Event object	Callback to invoke when dialog resizing is initiated.
onResizeEnd	event: Event object	Callback to invoke when dialog resizing is completed.
onDragEnd	event: Event object	Callback to invoke when dialog dragging is completed.
onMaximize	event: Event object	Callback to invoke when dialog maximized or unmaximized.

Шаблоны

Name	Parameters
header	-
content	-
footer	-

Стилизация

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.
p-dialog-footer	Footer element.

DataView Divider