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. |