Toast

shadow

The Toast component provides an unobtrusive way of displaying short notifications to the user. They are designed to appear and disappear seamlessly, ensuring that important information reaches users without being intrusive.

Stacked toasts and positions

Toast also supports a layered stack via the stacked attribute. Combined with stack-position="top-center" or stack-position="bottom-center", notifications are stored in the center of the screen, the newest one stays on top, and older toasts shrink in the collapsed state. On hover, the stack expands to full size in the order in which they were created. You can use the same stack mode in corners via top-start, top-end, bottom-start and bottom-end. In the demo below you can change the mode, position and colour of the toast via the selects.

Stack configuration

• The stacked enables the new layered mode without changing the default behavior of regular toasts.
• The stack-position specifies the location of the stack. For centered mode, use top-center or bottom-center.
• The stack-depth specifies the number of visual levels in the collapsed state. The default value is 3.

When to use

Use wje-toast 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.
• For larger numbers of toasts, use stacked and appropriate stack-depth to keep the stack readable.
• For a centered stack, we recommend setting a uniform width via --wje-toast-stack-width.

Attributes and properties

closable

Popis	Určuje, či je voľba closable zapnutá a ovplyvňuje správanie komponentu.
Atribút	closable
Typ	boolean
Predvolené	false

color

Popis	Nastavuje farbu komponentu.
Atribút	color
Typ	string
Predvolené	-

countdown

Popis	Určuje, či je voľba countdown zapnutá a ovplyvňuje správanie komponentu.
Atribút	countdown
Typ	boolean
Predvolené	false

duration

Popis	Nastavuje číselnú hodnotu používanú vo voľbe duration.
Atribút	duration
Typ	number
Predvolené	-

headline

Popis	Nastavuje textovú hodnotu uloženú vo voľbe headline.
Atribút	headline
Typ	string
Predvolené	-

icon

Popis	Nastavuje názov ikony použitej v komponente.
Atribút	icon
Typ	string
Predvolené	-

open

Popis	Určuje, či je voľba open zapnutá a ovplyvňuje správanie komponentu.
Atribút	open
Typ	boolean
Predvolené	false

stackDepth

Popis	Nastavuje číselnú hodnotu používanú vo voľbe stack-depth.
Atribút	stack-depth
Typ	number
Predvolené	-

stackPosition

Popis	Nastavuje stack position, ktorý používa logika stavu komponentu.
Atribút	stack-position
Typ	string
Predvolené	-

stacked

Popis	Určuje, či je voľba stacked zapnutá a ovplyvňuje správanie komponentu.
Atribút	stacked
Typ	boolean
Predvolené	false

Events

Názov	Popis
wje-toast:after-show	Vyvolá sa pri odoslaní udalosti wje-toast:after-show.
wje-toast:after-hide	Vyvolá sa pri odoslaní udalosti wje-toast:after-hide.

Methods

createToastStack

Popis	Vytvorí toast stack a pripojí ho do štruktúry komponentu.
Signatúra	() => HTMLDivElement

getToastStackKey

Popis	Vráti toast stack key z aktuálneho stavu komponentu.
Signatúra	() => string

applyToastStackPlacement

Popis	Spustí metódu applyToastStackPlacement na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(stack: HTMLDivElement) => void

syncToastStack

Popis	Synchronizuje toast stack s externým alebo interným zdrojom stavu.
Signatúra	(stack: HTMLDivElement) => void

clearStackItemStyles

Popis	Vyčistí stack položku styles a obnoví súvisiace hodnoty.
Signatúra	(toast: Toast) => void

getToastVisualHeight

Popis	Vráti toast visual height z aktuálneho stavu komponentu.
Signatúra	(toast: Toast) => number

updateToastStack

Popis	Aktualizuje toast stack podľa najnovších údajov komponentu.
Signatúra	(stack: HTMLDivElement) => void

CSS shadow parts

Názov	Popis
native	Štýluje koreňovú shadow časť komponentu.

CSS custom variables

Názov	Popis
--wje-toast-stack-width	Vlastná CSS premenná, ktorá riadi šírku kontajnera stacku toastov.

Slots

Názov	Popis
default	Predvolený slot pre hlavný obsah komponentu.
media	Slot pre mediálny obsah.