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.

Kedy použiť

Použite wje-dialog, keď potrebujete používateľovi okamžite komunikovať stav, výsledok akcie alebo ďalší krok.

Kedy nepoužiť

Nepoužívajte viacero konkurenčných feedback kanálov naraz pre jednu udalosť.

Prístupnosť

Status správy oznamujte cez vhodné ARIA live regióny a pri modálnych prvkoch spravujte fokus (open/close).

Odporúčané postupy

• Vyberte závažnosť správ (info/success/warning/error) podľa reálneho dopadu na používateľa.
• Pri blokujúcich akciách preferujte potvrdenie iba tam, kde hrozí nevratná zmena.
• Nastavte konzistentné timeouty, aby používateľ stihol správu prečítať.

Atribúty a vlastnosti

Pre tento komponent nie sú dostupné žiadne vlastnosti.

Udalosti

Pre tento komponent nie sú dostupné žiadne udalosti.

Metódy

htmlDialogBody

Popis	Vytvorí HTML štruktúru pre html dialog body.
Signatúra	(dialog: any) => void

close

Popis	Zatvorí komponent a odstráni stav viditeľnosti.
Signatúra	(e: any) => void

beforeOpen

Popis	Spustí sa pred open a pripraví stav komponentu.
Signatúra	(dialog: any, trigger: any) => void

afterOpen

Popis	Spustí sa po open a dokončí nadväzujúce operácie.
Signatúra	(dialog: any, trigger: any) => void

beforeClose

Popis	Spustí sa pred close a pripraví stav komponentu.
Signatúra	(dialog: any, trigger: any) => void

afterClose

Popis	Spustí sa po close a dokončí nadväzujúce operácie.
Signatúra	(dialog: any, trigger: any) => void

registerBlockingEvent

Popis	Zaregistruje blocking udalosť pre ďalšie interakcie komponentu.
Signatúra	(button: HTMLElement, promise: Function) => void

updateHasFooter

Popis	Aktualizuje has footer podľa najnovších údajov komponentu.
Signatúra	() => void

CSS tieňové časti

Názov	Popis
dialog	Štýluje shadow časť dialog.
header	Štýluje shadow časť header.
body	Štýluje shadow časť body.
footer	Štýluje shadow časť footer.
close	Štýluje shadow časť close.

CSS vlastné premenné

Názov	Popis
--wje-dialog-background	Vlastná CSS premenná na štýlovanie komponentu (background).
--wje-dialog-color	Vlastná CSS premenná, ktorá riadi color.
--wje-dialog-padding	Vlastná CSS premenná, ktorá riadi padding.
--wje-dialog-border-radius	Vlastná CSS premenná, ktorá riadi zaoblenie rohov.
--wje-dialog-box-shadow	Vlastná CSS premenná, ktorá riadi tieň.

Sloty

Názov	Popis
header	Slot pre obsah hlavičky.
body	Slot pre hlavný obsah tela komponentu.
footer	Slot pre obsah pätičky.