TabGroup

shadow

TabGroup displays a tab-based navigation that allows users to switch between and view different parts of the application's content without having to navigate to another page. It consists of individual tabs Tab and Panels, which when clicked display the contents of the tab. The TabGroup element supports multiple appearance variants using the variant attribute.

Basic usage

The Card element has been used only for the purpose of this demonstration.

Variants of tab placement

By adding the variant property it is possible to change the location of the tabs. Supported values are start, end and bottom.

Start

The preview aligns the tabs to the top, which is useful with a shorter number of tabs and a classic desktop layout.

End

The preview aligns the tabs to the end of the container, so you can see how the rhythm and visual of the entire navigation changes.

Bottom

The preview moves the tab navigation to the bottom edge, which is useful for mobile or app designs, for example.

When to use

Use wje-tab-group when the user needs to navigate the application or transition between states/screens.

When not to use

Do not use multiple parallel navigation patterns that compete with each other.

Accessibility

Provide clear active/selected states, predictable tab order, and naming of controls.

Recommended practices

• Keep the URL and UI state in sync to make the navigation reproducible.
• Use consistent terminology for items across menus, breadcrumb and tabs.
• For deep structures, add auxiliary context (breadcrumb, title, icons).

Attributes and properties

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

Events

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

Methods

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 shadow parts

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

CSS custom variables

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

Slots

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