MenuItem
MenuItem je podriadený elementu Menu. a predstavuje navigačnú položku v jeho vnútri. Môže zobrazovať podmenu s ďalšími navigačnými položkami a tiež umožňuje zobrazenie ikon. Pre príklady použitia MenuItem prejdite na stránku dokumentácie elementu Menu.
Základné použitie
Táto ukážka zobrazuje wje-menu-item v jeho najbežnejšom kontexte: ako súčasť aktívneho wje-menu s ikonami, oddeľovačmi a vnorenými submenu položkami.
Nav variant
Pri nav štýle je dôležité sledovať, ako sa položky správajú pri vnorení, checked stave a kombinácii slotov start, end a submenu.
Kedy použiť
Použite wje-menu-item, 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
customEvent
| Popis | Nastavuje textovú hodnotu uloženú vo voľbe custom-event. |
| Atribút | custom-event |
| Typ | string |
| Predvolené | - |
Udalosti
| Názov | Popis |
|---|---|
wje-menu-item:click | Vyvolá sa pri kliknutí na komponent. |
Metódy
Pre tento komponent nie sú dostupné žiadne verejné metódy.
CSS tieňové časti
| Názov | Popis |
|---|---|
native | Štýluje koreňovú shadow časť komponentu. |
submenu | Štýluje shadow časť submenu. |
CSS vlastné premenné
| Názov | Popis |
|---|---|
--wje-menu-item-color | Vlastná CSS premenná, ktorá riadi color. |
--wje-menu-item-background | Vlastná CSS premenná na štýlovanie komponentu (background). |
--wje-menu-item-color-hover | Vlastná CSS premenná, ktorá riadi color hover. |
--wje-menu-item-background-hover | Vlastná CSS premenná na štýlovanie komponentu (background hover). |
--wje-menu-item-color-focus | Vlastná CSS premenná, ktorá riadi color focus. |
--wje-menu-item-background-focus | Vlastná CSS premenná na štýlovanie komponentu (background focus). |
--wje-menu-item-color-active | Vlastná CSS premenná, ktorá riadi color active. |
--wje-menu-item-background-active | Vlastná CSS premenná na štýlovanie komponentu (background active). |
--wje-menu-item-padding-top | Vlastná CSS premenná, ktorá riadi padding top. |
--wje-menu-item-padding-bottom | Vlastná CSS premenná, ktorá riadi padding bottom. |
--wje-menu-item-line-height | Vlastná CSS premenná, ktorá riadi výšku riadku. |
--wje-menu-submenu-offset | Vlastná CSS premenná na štýlovanie komponentu (menu submenu offset). |
--wje-menu-item-icon-visibility | Vlastná CSS premenná na štýlovanie komponentu (icon visibility). |
--wje-menu-item-safe-triangle-cursor-x | Vlastná CSS premenná na štýlovanie komponentu (safe triangle cursor x). |
--wje-menu-item-safe-triangle-cursor-y | Vlastná CSS premenná na štýlovanie komponentu (safe triangle cursor y). |
--wje-menu-item-safe-triangle-submenu-start-x | Vlastná CSS premenná na štýlovanie komponentu (safe triangle submenu start x). |
--wje-menu-item-safe-triangle-submenu-start-y | Vlastná CSS premenná na štýlovanie komponentu (safe triangle submenu start y). |
--wje-menu-item-safe-triangle-submenu-end-x | Vlastná CSS premenná na štýlovanie komponentu (safe triangle submenu end x). |
--wje-menu-item-safe-triangle-submenu-end-y | Vlastná CSS premenná na štýlovanie komponentu (safe triangle submenu end y). |
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. |
submenu | Slot pre vlastný obsah submenu v komponente. |