shadow
The Dialog element displays a dialog box with customizable content. It can be used, for example, to simply display information to the user or to request confirmation or cancellation of an action taken by the user. It is located above the application content and must be manually dismissed by the user in order to continue interacting with the application. The dialog can be displayed in different screen sizes and positions.
One way to display the 'Dialog' component is to use the 'Button' component with the 'dialog' attribute.
For more information about the 'Button' component, go to Button.
It is also possible to display the Dialog component using JavaScript. The onOpen() method, which is called on the wje-dialog element, is used to create a dialog box. This method displays a dialog box and returns its instance. To close a dialog box, you need to call the onClose() method on its instance.
The placement property specifies the placement of the dialog box on the screen. The default is slide-up. Other options are "stick-up", "fill-in", "slide-left", "slide-right".
The size property adjusts the size of the dialog box on the screen. The default size is "small". Other options are "medium", "large" and "ex-large".
Dynamic content change
The content of the Dialog element can be easily changed by using a custom event and one of the beforeShow, afterShow, beforeHide or afterHide methods.
The content of the Dialog element can be easily changed by using a custom event and one of the beforeShow, afterShow, beforeHide or afterHide methods.
| Description | Sets the title of the dialog box. |
| Attribute | headline |
| Type | string |
| Default | undefined |
| Description | Sets the location of the dialog box. |
| Attribute | placement |
| Type | "slide-up" ｜ "stick-up" ｜ "fill-in" ｜ "slide-left" ｜ "slide-right" |
| Default | "slide-up" |
| Description | If true, allows the dialog to be loaded asynchronously. |
| Attribute | async |
| Type | boolean |
| Default | false |
| Description | If true, the close button will be hidden. |
| Attribute | close-hidden |
| Type | boolean |
| Default | false |
| Description | The name of the event that triggers the opening of the dialog. |
| Attribute | trigger |
| Type | string |
| Default | undefined |
| Description | Sets the size of the dialog box. |
| Attribute | size |
| Type | "small" ｜ "medium" ｜ "large" ｜ "ex-large" |
| Default | "small" |
No events available for this component.
| Description | Opens a dialog box. |
| Signature | (e?: Event) => void |
| Description | Closes the dialog box. |
| Signature | (e?: Event) => void |
| Description | It is called before the dialogue is opened. Can be overridden to trigger custom logic. |
| Signature | (dialog: HTMLElement, trigger: Event) => Promise<void> |
| Description | It calls for the opening of a dialogue. Can be overridden to run custom logic. |
| Signature | (dialog: HTMLElement, trigger: Event) => Promise<void> |
| Description | It is called before the dialogue is closed. Can be overridden to trigger custom logic. |
| Signature | (dialog: HTMLElement, trigger: Event) => Promise<void> |
| Description | It is called after the dialogue is closed. Can be overridden to trigger custom logic. |
| Signature | (dialog: HTMLElement, trigger: Event) => Promise<void> |
| Description | Registers an event listener on the provided button, which triggers a blocking UI element and executes the specified promise when the button is clicked. |
| Signature | (button: HTMLElement, promise: Function) => void |
| Name | Description |
|---|
header | Dialogue header section. |
bodies | The main content area of the dialogue. |
footer | Dialogue footer section. |
close | Button element to close the dialog. |
headline | Heading text element. |
header-actions | Container for header actions. |
| Name | Description |
|---|
--wje-dialog-width | Dialog window width |
--wje-dialog-height | Height of the dialog box |
--wje-dialog-border-radius | Rounding the edges of the dialog box |
--wje-dialog-border-width | Dialog box border width |
--wje-dialog-border-style | Dialog box border style |
--wje-dialog-border-color | Dialog box border colour |
--wje-dialog-margin-top | Top edge of the dialog box |
--wje-dialog-margin-bottom | Bottom edge of the dialog |
--wje-dialog-margin-start | Left edge of the dialog box |
--wje-dialog-margin-end | Right edge of the dialog box |
--wje-dialog-padding | Internal indentation of dialogue sections |
--wje-backdrop-opacity | Background transparency in open dialogue |
--wje-backdrop | Background colour in open dialogue |
--wje-dialog-header-actions-gap | Space between action items in the header |
--wje-dialog-headline-font-size | Font size of the heading |
--wje-dialog-headline-font-weight | Font thickness of the heading |
--wje-dialog-headline-letter-spacing | Space between the letters of the heading |
--wje-dialog-headline-text-transform | Headline text transformation |
| Name | Description |
|---|
| `` | The main content of the dialog box. |
header | Content placed in the dialogue header area. |
footer | Content located in the dialogue footer area. |