Breadcrumbs

shadow

Breadcrumbs je komponent, ktorý zobrazuje cestu, po ktorej používateľ prešiel v rámci aplikácie alebo webu. Tento element zobrazuje hierarchické usporiadanie stránok, v ktorom každý segment cesty Breadcrumb je hyperlink, umožňujúci rýchly návrat na predchádzajúce úrovne. Breadcrumbs môže obsahovať ikonu.

Základné použitie

Použitie s ikonami

Vlastná ikona oddeľovača

Zbaľovací breadcrumb

Maximálny počet položiek

Ak je v zozname viac položiek ako hodnota maxItems, zoznam sa zbalí. V predvolenom nastavení sa zobrazí len prvá a posledná položky.

Počet položiek pred alebo po zbalení

Keď sú položky zbalené, počet položiek, ktoré sa majú zobraziť, možno ovládať pridaním vlastností itemsBeforeCollapse a itemsAfterCollapse.

Rozbaľovacie okno

Zbalené položky je možné zobraziť aj v podobe rozbaľovacieho okna použitím vlastnosti collapsed-variant s hodnotou dropdown.

Kedy použiť

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

maxItems

Popis	Nastavuje číselnú hodnotu používanú vo voľbe max-items.
Atribút	max-items
Typ	number
Predvolené	-

itemsBeforeCollapse

Popis	Nastavuje číselnú hodnotu používanú vo voľbe items-before-collapse.
Atribút	items-before-collapse
Typ	number
Predvolené	-

itemsAfterCollapse

Popis	Nastavuje číselnú hodnotu používanú vo voľbe items-after-collapse.
Atribút	items-after-collapse
Typ	number
Predvolené	-

Udalosti

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

Metódy

getBreadcrumbs

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

getBreadcrumbsCollapsed

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

CSS tieňové časti

Názov	Popis
container	Štýluje kontajnerovú shadow časť.

CSS vlastné premenné

Pre tento komponent nie sú dostupné žiadne vlastné CSS vlastnosti.

Sloty

Názov	Popis
default	Predvolený slot pre hlavný obsah komponentu.