Skip to main content

Dialog

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.

Základné použitie

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.

Základné použitie s JavaScriptom

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.

Placement (Umiestnenie)

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

Size (Veľkosť)

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

Dynamická zmena obsahu

Obsah elementu Dialog sa dá jednoducho meniť využitím custom eventu a jednou z metód beforeShow, afterShow, beforeHide alebo afterHide.

Registrovanie Blocking eventu

Obsah elementu Dialog sa dá jednoducho meniť využitím custom eventu a jednou z metód beforeShow, afterShow, beforeHide alebo afterHide.

Atribúty a Vlastnosti

headline

DescriptionSets the title of the dialog box.
Attributeheadline
Typestring
Defaultundefined

placement

DescriptionSets the location of the dialog box.
Attributeplacement
Type"slide-up" | "stick-up" | "fill-in" | "slide-left" | "slide-right"
Default"slide-up"

async

DescriptionIf true, allows the dialog to be loaded asynchronously.
Attributeasync
Typeboolean
Defaultfalse

closeHidden

DescriptionIf true, the close button will be hidden.
Attributeclose-hidden
Typeboolean
Defaultfalse

trigger

DescriptionThe name of the event that triggers the opening of the dialog.
Attributetrigger
Typestring
Defaultundefined

size

DescriptionSets the size of the dialog box.
Attributesize
Type"small" | "medium" | "large" | "ex-large"
Default"small"

Eventy

No events available for this component.

Metódy

OnOpen

DescriptionOpens a dialog box.
Signature(e?: Event) => void

close

DescriptionCloses the dialog box.
Signature(e?: Event) => void

BeforeOpen

DescriptionIt is called before the dialogue is opened. Can be overridden to trigger custom logic.
Signature(dialog: HTMLElement, trigger: Event) => Promise<void>

afterOpen

DescriptionIt calls for the opening of a dialogue. Can be overridden to run custom logic.
Signature(dialog: HTMLElement, trigger: Event) => Promise<void>

beforeClose

DescriptionIt is called before the dialogue is closed. Can be overridden to trigger custom logic.
Signature(dialog: HTMLElement, trigger: Event) => Promise<void>

afterClose

DescriptionIt is called after the dialogue is closed. Can be overridden to trigger custom logic.
Signature(dialog: HTMLElement, trigger: Event) => Promise<void>

registerBlockingEvent

DescriptionRegisters 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

CSS Shadow Parts

NameDescription
headerDialogue header section.
bodiesThe main content area of the dialogue.
footerDialogue footer section.
closeButton element to close the dialog.
headlineHeading text element.
header-actionsContainer for header actions.

CSS Custom Vlastnosti

NameDescription
--wje-dialog-widthDialog window width
--wje-dialog-heightHeight of the dialog box
--wje-dialog-border-radiusRounding the edges of the dialog box
--wje-dialog-border-widthDialog box border width
--wje-dialog-border-styleDialog box border style
--wje-dialog-border-colorDialog box border colour
--wje-dialog-margin-topTop edge of the dialog box
--wje-dialog-margin-bottomBottom edge of the dialog
--wje-dialog-margin-startLeft edge of the dialog box
--wje-dialog-margin-endRight edge of the dialog box
--wje-dialog-paddingInternal indentation of dialogue sections
--wje-backdrop-opacityBackground transparency in open dialogue
--wje-backdropBackground colour in open dialogue
--wje-dialog-header-actions-gapSpace between action items in the header
--wje-dialog-headline-font-sizeFont size of the heading
--wje-dialog-headline-font-weightFont thickness of the heading
--wje-dialog-headline-letter-spacingSpace between the letters of the heading
--wje-dialog-headline-text-transformHeadline text transformation

Sloty

NameDescription
``The main content of the dialog box.
headerContent placed in the dialogue header area.
footerContent located in the dialogue footer area.