shadow
Element Dialog zobrazuje dialógové okno s prispôsobiteľným obsahom. Je možné ho využiť napríklad na jednoduché zobrazenie informácie používateľovi alebo tiež vyžiadať jeho potvrdenie alebo zrušenie ním vykonanej akcie. Nachádza sa nad obsahom aplikácie a používateľ ho musí ručne zrušiť, aby mohol pokračovať v interakcii s aplikáciou. Dialógové okno je možné zobraziť v rôznych veľkostiach a pozíciách obrazovky.
Jednou z možností ako zobraziť komponent 'Dialog' je použitie komponentu 'Button' s atribútom 'dialog'.
Pre viac informácii o komponente 'Button' prejdite na stránku Button.
Zobraziť komponent Dialog je možné aj použitím JavaScriptu. Na vytvorenie dialógového okna slúži metóda onOpen(), ktorá sa volá na elemente wje-dialog. Táto metóda zobrazuje dialógové okno a vracia jeho inštanciu. Na zatvorenie dialógového okna je potrebné zavolať metódu onClose() na jeho inštancii.
Vlastnosť placement určuje umiestnenie dialógového okna na obrazovke. Predvolená je hodnota slide-up. Ďalšie možnosti sú "stick-up", "fill-in", "slide-left", "slide-right".
Vlastnosť size upravuje veľkosť dialógového okna na obrazovke. Predvolená je veľkosť "small". Ďalšie možnosti sú "medium", "large" a "ex-large".
Obsah elementu Dialog sa dá jednoducho meniť využitím custom eventu a jednou z metód beforeShow, afterShow, beforeHide alebo afterHide.
Obsah elementu Dialog sa dá jednoducho meniť využitím custom eventu a jednou z metód beforeShow, afterShow, beforeHide alebo afterHide.
| 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. |