Dialog
The ui5-dialog
component is used to temporarily display some information in a
size-limited window in front of the regular app screen.
It is used to prompt the user for an action or a confirmation.
The ui5-dialog
interrupts the current app processing as it is the only focused UI element and
the main screen is dimmed/blocked.
The dialog combines concepts known from other technologies where the windows have
names such as dialog box, dialog window, pop-up, pop-up window, alert box, or message box.
The ui5-dialog
is modal, which means that an user action is required before it is possible to return to the parent window.
To open multiple dialogs, each dialog element should be separate in the markup. This will ensure the correct modal behavior. Avoid nesting dialogs within each other.
The content of the ui5-dialog
is fully customizable.
Structure​
A ui5-dialog
consists of a header, content, and a footer for action buttons.
The ui5-dialog
is usually displayed at the center of the screen.
Its position can be changed by the user. To enable this, you need to set the property draggable
accordingly.
Responsive Behavior​
The stretch
property can be used to stretch the
ui5-dialog
on full screen.
Note: When a ui5-bar
is used in the header or in the footer, you should remove the default dialog's paddings.
For more information see the sample "Bar in Header/Footer".
Keyboard Handling​
Basic Navigation​
When the ui5-dialog
has the draggable
property set to true
and the header is focused, the user can move the dialog
with the following keyboard shortcuts:
- [Up] or [Down] arrow keys - Move the dialog up/down.
- [Left] or [Right] arrow keys - Move the dialog left/right.
Resizing​
When the ui5-dialog
has the resizable
property set to true
and the header is focused, the user can change the size of the dialog
with the following keyboard shortcuts:
- [Shift] + [Up] or [Down] - Decrease/Increase the height of the dialog.
- [Shift] + [Left] or [Right] - Decrease/Increase the width of the dialog.