TabGroup

shadow

TabGroup zobrazuje navigáciu založenú na záložkách, ktorá umožňuje používateľom prepínať sa a zobrazovať rôzne časti obsahu aplikácie bez potreby prechádzať na inú stránku. Skladá sa z jednotlivých záložiek Tab a Panelov, ktoré po kliknutí na záložku zobrazia jej obsah. TabGroup element podporuje viacero variantov vzhľadu pomocou atribútu variant.

Základné použitie

Element Card bol použitý len za účelom tejto ukážky.

Varianty umiestnenia tabov

Pridaním vlastnosti variant je možné zmeniť umiestnenie tabov. Podporované sú hodnoty start, end a bottom.

Start

Ukážka zarovnáva taby na začiatok, čo je vhodné pri kratšom počte záložiek a klasickom desktopovom layoute.

End

Ukážka zarovnáva taby na koniec kontajnera, takže je vidieť, ako sa mení rytmus a vizuál celej navigácie.

Bottom

Ukážka presúva tab navigation na spodnú hranu, čo sa hodí napríklad pre mobilné alebo aplikáciové vzory.

Kedy použiť

Použite wje-tab-group, 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

type

Popis	Nastavuje typ vstupu, ktorý riadi spracovanie a validáciu hodnoty.
Atribút	type
Typ	string
Predvolené	panel

variant

Popis	Nastavuje ARIA metadáta, ktoré zlepšujú prístupnosť pre asistenčné technológie.
Atribút	variant
Typ	string
Predvolené	top

Udalosti

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

Metódy

removeActiveTab

Popis	Odstráni active tab z aktuálneho stavu komponentu.
Signatúra	() => void

setActiveTab

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

getActiveTab

Popis	Vráti active tab z aktuálneho stavu komponentu.
Signatúra	() => Element｜null

getTabAll

Popis	Vráti tab všetky z aktuálneho stavu komponentu.
Signatúra	() => Array<Element>

getAllTabs

Popis	Vráti všetky tabs z aktuálneho stavu komponentu.
Signatúra	() => Array<Element>

getPanelAll

Popis	Vráti panel všetky z aktuálneho stavu komponentu.
Signatúra	() => Array<Element>

getPanelAllName

Popis	Vráti panel všetky name z aktuálneho stavu komponentu.
Signatúra	() => Array<string>

toggleMoreVisibility

Popis	Prepne more visibility medzi zapnutým a vypnutým stavom.
Signatúra	() => void

initTabMetrics

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

measureTabMetrics

Popis	Spustí metódu measureTabMetrics na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	() => Array<{el: Element, width: number}>

measureMoreWidth

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

checkOverflow

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

dropdownActive

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

CSS tieňové časti

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

CSS vlastné premenné

Názov	Popis
--wje-tab-group-padding	Vlastná CSS premenná, ktorá riadi padding.

Sloty

Názov	Popis
default	Predvolený slot pre hlavný obsah komponentu.
nav	Slot pre vlastný navigačný obsah.