Toast

shadow

Komponent Toast poskytuje nenápadný spôsob zobrazovania krátkych oznámení používateľovi. Sú navrhnuté tak, aby sa objavovali a mizli plynulo, čím sa zabezpečí, že sa dôležité informácie dostanú k používateľom bez toho, aby boli rušivé.

Stacked toasty a pozície

Toast podporuje aj vrstvený stack cez atribút stacked. V kombinácii s stack-position="top-center" alebo stack-position="bottom-center" sa notifikácie ukladajú do stredu obrazovky, najnovšia ostáva navrchu a staršie toast-y sa v collapsed stave zmenšujú. Pri hover sa stack rozbalí do plnej veľkosti v poradí, v akom boli vytvorené. Rovnaký stack režim vieš použiť aj v rohoch cez top-start, top-end, bottom-start a bottom-end. V ukážke nižšie si vieš cez selecty meniť režim, pozíciu aj farebný variant toastu.

Konfigurácia stacku

• stacked zapne nový vrstvený režim bez zmeny defaultného správania bežných toastov.
• stack-position určuje umiestnenie stacku. Pre centered režim použite top-center alebo bottom-center.
• stack-depth určuje počet vizuálnych úrovní v collapsed stave. Predvolená hodnota je 3.

Kedy použiť

Použite wje-toast, 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ť.
• Pri väčšom počte toastov použite stacked a primeraný stack-depth, aby stack zostal čitateľný.
• Pre centered stack odporúčame nastaviť jednotnú šírku cez --wje-toast-stack-width.

Atribúty a vlastnosti

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

Udalosti

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.

Metódy

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 tieňové časti

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

CSS vlastné premenné

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

Sloty

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