Dialog
A dialog is a modal window that appears on top of the current page. It is used to display content that requires user interaction.
Setup
Begin by adding a dialog element to your page. Place a button or any other layout inside the trigger block. Clicking on this block will open the dialog by default.
By clicking on 'Toggle dialog' button in the right side panel, you can open the dialog. The content of the dialog will be shown and from there you can adjust it any way you want.
You can adjust the dialog properties in the right side panel.
Customization
Below are the properties you can customize for the dialog element.
| Name of property | Type | Description |
|---|---|---|
| Type | None Modal Sheet | Modal can be positioned on two axis, either choosing a specific side or alignment or using custom values. Sheet can be positioned on four sides of the screen and will take the full width or height of the screen depending on the side. The third type is None which will be unstyled by default. |
| Side (Sheet) | Left Right Bottom Top | If you choose Sheet type, you can choose a side of the screen to position the dialog on. |
| Side (Modal) | Left Center Right | If you choose Modal type, you can choose a side of the screen to position the dialog on. Available options are Left, Center, Right, Custom. |
| Align (Modal) | Top, Center, Bottom | If you choose Modal type, you can choose an alignment of the dialog on the screen. |
| Custom Position (X) | Unit | If you choose Custom side, you can choose a custom position of the dialog on the screen. |
| Custom Position (Y) | Unit | If you choose Custom side, you can choose a custom position of the dialog on the screen. |
| Animation | None Fade Zoom in Slide in | If you choose Custom side, you can choose a custom position of the dialog on the screen. |
| Direction | Left Right Top Bottom | If you choose Slide in animation, you can choose a direction of the dialog on the screen. |
| Animation duration | Unit | The duration of the animation. |
| Animation easing | Linear Ease in Ease out Ease in out | The easing of the animation. |
| Prevent scrolling | Boolean | Whether users can scroll the page when the dialog is open. |
| Escape key to close | Boolean | Whether the dialog should be closed when the escape key is pressed. |
| Trigger | Boolean | Whether the dialog should have and display a trigger. |
| Trigger click closes | Boolean | Whether the dialog should be closed when the trigger is clicked. |
| Overlay | Boolean | Whether the dialog should have an overlay. |
| Overlay click closes | Boolean | Whether the dialog should be closed when the overlay is clicked. |
| Click outside closes | Boolean | Whether the dialog should be closed when the user clicks outside the dialog. |
| Modal | Boolean | Whether users can do any interactions outside the dialog e.g. select text, click buttons, etc. |
Component actions
| Name | Description |
|---|---|
| Open dialog | Opens the dialog. |
| Close dialog | Closes the dialog. |
| Toggle dialog | Toggles the dialog. |
For more information on component actions, see Component actions.
Reusing dialogs
In many cases, you'll want to have a single dialog with the same structure, but opened from different triggers. To achieve this, you can turn off the 'Trigger' property in the dialog element and position it anywhere on your page. After that, you can open the dialog from any of the elements you want by using the Open dialog component action.