Tab
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
last
| Popis | Určuje, či je voľba last zapnutá a ovplyvňuje správanie komponentu. |
| Atribút | last |
| Typ | boolean |
| Predvolené | false |
Udalosti
| Názov | Popis |
|---|---|
wje-tab:change | Vyvolá sa pri zmene hodnoty komponentu. |
Metódy
syncAriaLabel
| Popis | Synchronizuje aria label s externým alebo interným zdrojom stavu. |
| Signatúra | () => void |
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.