Dialog

shadow

The Dialog element displays a dialog box with customizable content. It can be used, for example, to simply display information to the user or to request confirmation or cancellation of an action taken by the user. It is located above the application content and must be manually dismissed by the user in order to continue interacting with the application. The dialog can be displayed in different screen sizes and positions.

Basic usage

One way to display the 'Dialog' component is to use the 'Button' component with the 'dialog' attribute. For more information about the 'Button' component, go to Button.

Basic use with JavaScript

It is also possible to display the Dialog component using JavaScript. The onOpen() method, which is called on the wje-dialog element, is used to create a dialog box. This method displays a dialog box and returns its instance. To close a dialog box, you need to call the onClose() method on its instance.

Placement

The placement property specifies the placement of the dialog box on the screen. The default is slide-up. Other options are "stick-up", "fill-in", "slide-left", "slide-right".

Size

The size property adjusts the size of the dialog box on the screen. The default size is "small". Other options are "medium", "large" and "ex-large".

Dynamic content change

The content of the Dialog element can be easily changed by using a custom event and one of the beforeShow, afterShow, beforeHide or afterHide methods.

Registering a Blocking Event

The content of the Dialog element can be easily changed by using a custom event and one of the beforeShow, afterShow, beforeHide or afterHide methods.

When to use

Use wje-dialog when you need to immediately communicate a status, the result of an action, or the next step to the user.

When not to use

Don't use multiple competing feedback channels at the same time for one event.

Accessibility

Communicate message status through appropriate ARIA live regions and manage focus (open/close) for modal elements.

Recommended practices

• Select the severity of the messages (info/success/warning/error) according to the real impact on the user.
• For blocking actions, prefer confirmation only where irreversible change is imminent.
• Set consistent timeouts so the user has time to read the message.

Attributes and properties

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

Events

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

Methods

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 shadow parts

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 custom variables

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

Slots

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