Stepper

shadow

Komponent Stepper zobrazuje pokrok prostredníctvom očíslovaných krokov. Poskytuje workflow podobný sprievodcovi. Steppery zobrazujú pokrok prostredníctvom sekvencie očíslovaných krokov.

Základné použitie

Disabled (Deaktivované) kroky

Vlastné tlačidlá

Kedy použiť

Použite wje-stepper, keď používateľ zadáva hodnotu, vyberá možnosti alebo vykonáva akciu vo formulári.

Kedy nepoužiť

Nepoužívajte ho len ako vizuálny dekoratívny prvok bez interakcie. V takom prípade uprednostnite prezentačné komponenty.

Prístupnosť

Vždy prepojte komponent s popisom (label/aria-label), zachovajte ovládanie klávesnicou a pri validačných chybách zobrazte zrozumiteľnú správu.

Odporúčané postupy

• Majte jednotné validačné pravidlá a error stavy naprieč celým formulárom.
• Pri asynchrónnych operáciách zobrazte stav načítania alebo disabled stav.
• Pri zložitých formulároch preferujte menšie sekcie a okamžitú spätnú väzbu.

Atribúty a vlastnosti

active

Popis	Určuje, či je komponent aktívny.
Atribút	active
Typ	string
Predvolené	-

done

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

Udalosti

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

Metódy

processStep

Popis	Spracuje aktuálny krok a aktualizuje stav steppera aj navigáciu.
Signatúra	(index: any, step: any, header: any, steps: any) => void

navigate

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

goToStep

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

setStepDefault

Popis	Nastaví step default a aplikuje súvisiace zmeny stavu.
Signatúra	(nav: HTMLElement, badge?: HTMLElement｜null, stepIndex?: number) => void

setStepActive

Popis	Nastaví step active a aplikuje súvisiace zmeny stavu.
Signatúra	(nav: HTMLElement, badge?: HTMLElement｜null, stepIndex?: number｜null) => void

setContentActive

Popis	Nastaví content active a aplikuje súvisiace zmeny stavu.
Signatúra	(stepIndex: number) => void

getStepElement

Popis	Vráti step element z aktuálneho stavu komponentu.
Signatúra	(stepIndex: number) => HTMLElement

renderStepContent

Popis	Vykreslí step content v používateľskom rozhraní komponentu.
Signatúra	(stepIndex: number, content: Node｜string｜Node[], options?: \{ replace?: boolean \}) => void

setStepDone

Popis	Nastaví step done a aplikuje súvisiace zmeny stavu.
Signatúra	(nav: HTMLElement, badge?: HTMLElement｜null) => void

setStepLocked

Popis	Nastaví step locked a aplikuje súvisiace zmeny stavu.
Signatúra	(nav: any, badge: any) => void

CSS tieňové časti

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

CSS vlastné premenné

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

Sloty

Názov	Popis
default	Predvolený slot pre hlavný obsah komponentu.