Breadcrumb

shadow

Breadcrumb zobrazuje jeden segment navigačnej cesty v aplikácii a je potomkom elementu Breadcrumbs. Môže zobrazovať aj ikonu.

Poznámka

Pre viac informácií o použítí Breadcrumbs sa presuňte do dokumentácie elementu Breadcrumbs.

Kedy použiť

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

showCollapsedIndicator

Popis	Riadi správanie voľby show-collapsed-indicator v komponente.
Atribút	show-collapsed-indicator
Typ	any
Predvolené	-

collapsed

Popis	Určuje, či je komponent zbalený.
Atribút	collapsed
Typ	any
Predvolené	-

last

Popis	Riadi správanie voľby last v komponente.
Atribút	last
Typ	any
Predvolené	-

Udalosti

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

Metódy

drawCollapsedIndicator

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

collapseDropdown

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

collapseButton

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

getBreadcrumbs

Popis	Vráti breadcrumbs z aktuálneho stavu komponentu.
Signatúra	() => Element

CSS tieňové časti

Názov	Popis
native	Štýluje koreňovú shadow časť komponentu.
separator	Štýluje shadow časť separator.

CSS vlastné premenné

Názov	Popis
--wje-breadcrumb-a	Vlastná CSS premenná na štýlovanie komponentu (a).
--wje-breadcrumb-a-hover	Vlastná CSS premenná na štýlovanie komponentu (a hover).

Sloty

Názov	Popis
default	Predvolený slot pre hlavný obsah komponentu.
start	Slot pre obsah zobrazený pred hlavným obsahom.
end	Slot pre obsah zobrazený za hlavným obsahom.
separator	Slot pre vlastný oddeľovač medzi položkami.