Tab

shadow

Komponent Tab je podriadeným komponentom TabGroup a slúži ako tlačidlo navigácie založenej na záložkách. Používa sa v kombinácii s elementom TabPanel.

note

Pre príklady použitia komponentu Tab prejdite na dokumentáciu TabGroup.

Kedy použiť

Použite wje-tab, keď používateľ potrebuje orientáciu v aplikácii alebo prechod medzi stavmi/obrazovkami.

Kedy nepoužiť

Nepoužívajte viac paralelných navigačných vzorov, ktoré si navzájom konkurujú.

Prístupnosť

Zabezpečte jasné active/selected stavy, predvídateľné poradie tabulátora a pomenovanie ovládacích prvkov.

Odporúčané postupy

• Držte URL a UI stav v synchronizácii, aby bola navigácia reprodukovateľná.
• Používajte konzistentné názvoslovie položiek naprieč menu, breadcrumbom a tabmi.
• Pri hlbokých štruktúrach pridajte pomocný kontext (breadcrumb, nadpis, ikony).

Atribúty a vlastnosti

panel

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

route

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

Udalosti

Názov	Popis
wje-tab:change	Vyvolá sa pri zmene hodnoty komponentu.

Metódy

setRovingTabIndex

Popis	Nastaví roving tab index a aplikuje súvisiace zmeny stavu.
Signatúra	(value: number) => void

CSS tieňové časti

Pre tento komponent nie sú dostupné žiadne CSS časti tieňa.

CSS vlastné premenné

Názov	Popis
--wje-tab-text-transform	Vlastná CSS premenná na štýlovanie komponentu (text transform).
--wje-tab-font-weight	Vlastná CSS premenná, ktorá riadi typografiu.
--wje-tab-letter-spacing	Vlastná CSS premenná, ktorá riadi rozostup písmen.
--wje-tab-padding-inline	Vlastná CSS premenná, ktorá riadi padding inline.
--wje-tab-padding-top	Vlastná CSS premenná, ktorá riadi padding top.
--wje-tab-padding-bottom	Vlastná CSS premenná, ktorá riadi padding bottom.
--wje-tab-color-active	Vlastná CSS premenná, ktorá riadi color active.
--wje-tab-color-hover	Vlastná CSS premenná, ktorá riadi color hover.

Sloty

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