MenuItem

shadow

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.

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

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

Udalosti

Názov	Popis
wje-menu-item:click	Vyvolá sa pri kliknutí na komponent.

Metódy

collapseItem

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

showSubmenu

Popis	Zobrazí submenu v používateľskom rozhraní komponentu.
Signatúra	() => void

hideSubmenu

Popis	Skryje submenu v používateľskom rozhraní komponentu.
Signatúra	() => void

submenuToggle

Popis	Spustí metódu submenuToggle na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(e: Event) => void

deactivateSubmenu

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

activateSubmenu

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

getTextFromElement

Popis	Vráti text from element z aktuálneho stavu komponentu.
Signatúra	(element: HTMLElement) => string

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.