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

async

Popis	Zapína asynchrónny režim dialógu, v ktorom hooky môžu pripraviť obsah ešte pred zobrazením.
Atribút	async
Typ	boolean
Predvolené	false

closeHidden

Popis	Skryje vstavané tlačidlo na zatvorenie v hlavičke dialógu.
Atribút	close-hidden
Typ	boolean
Predvolené	false

headline

Popis	Nastavuje nadpis dialógu použitý v zabudovanej hlavičke aj pri prístupnom pomenovaní.
Atribút	headline
Typ	string
Predvolené	-

hiddenFooter

Popis	Skryje vstavanú pätu dialógu.
Atribút	hidden-footer
Typ	boolean
Predvolené	false

hiddenHeader

Popis	Skryje vstavanú hlavičku dialógu.
Atribút	hidden-header
Typ	boolean
Predvolené	false

placement

Popis	Určuje variant prechodu dialógu, napríklad slide-up alebo slide-left.
Atribút	placement
Typ	string｜string
Predvolené	slide-up

Udalosti

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

Metódy

close

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

registerBlockingEvent

Popis	Zaregistruje blocking udalosť pre ďalšie interakcie komponentu.
Signatúra	(button: HTMLElement, promise: Function) => 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.