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

Ukážka predstavuje stepper v jeho základnom flow s predvolenou navigáciou medzi krokmi.

Disabled (Deaktivované) kroky

Ukážka blokuje niektoré kroky steppera, takže je vidieť, ako komponent komunikuje nedostupnú navigáciu.

Vlastné tlačidlá

Ukážka nahrádza predvolené ovládanie vlastnými tlačidlami, čo sa hodí pri zložitejších formulároch alebo wizard flow.

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é	-

startIndex

Popis	Nastavuje start index, ktorý používa logika stavu komponentu.
Atribút	start-index
Typ	number｜string
Predvolené	-

Udalosti

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

Metódy

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

CSS tieňové časti

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

CSS vlastné premenné

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

Sloty

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