Breadcrumbs
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
Ukážka zobrazuje základný breadcrumb trail s niekoľkými úrovňami, aby bolo jasné, ako sa skladá navigačná cesta a kde je aktívna položka.
Použitie s ikonami
Ukážka pridáva ikony priamo k breadcrumb položkám. Hodí sa v prípadoch, keď potrebujete rýchlejšie rozlíšiť sekcie aj vizuálne, nielen textom.
Vlastná ikona oddeľovača
Ukážka mení predvolený oddeľovač breadcrumbov za vlastnú ikonu. Je to vhodné vtedy, keď chcete trail priblížiť vizuálnemu štýlu zvyšku aplikácie.
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.
Rozbalenie po kliknutí
Ak nechcete rozbaľovacie menu, predvolený button variant zobrazí skryté položky priamo v traili po kliknutí na indikátor zbalenia.
Úprava štýlov
Farebné varianty
Farby breadcrumbov sa upravujú cez CSS premenné na wje-breadcrumb, takže si môžete pripraviť aj vlastné významové varianty pre konkrétne trail-y.
CSS vlastné premenné
Ak potrebujete jemnejšie doladiť predvolený vzhľad, upravte CSS premenné pre text a hover stav jednotlivých breadcrumb položiek.
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
itemsAfterCollapse
| Popis | Nastavuje číselnú hodnotu používanú vo voľbe items-after-collapse. |
| Atribút | items-after-collapse |
| Typ | number |
| Predvolené | 1 |
itemsBeforeCollapse
| Popis | Nastavuje číselnú hodnotu používanú vo voľbe items-before-collapse. |
| Atribút | items-before-collapse |
| Typ | number |
| Predvolené | 1 |
maxItems
| Popis | Nastavuje číselnú hodnotu používanú vo voľbe max-items. |
| Atribút | max-items |
| Typ | number |
| Predvolené | - |
variant
| Popis | Nastavuje ARIA metadáta, ktoré zlepšujú prístupnosť pre asistenčné technológie. |
| Atribút | variant |
| Typ | string |
| Predvolené | button |
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. |