Skip to main content

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.

Atribúty a Vlastnosti

customEvent

DescriptionThe name of the custom event that is triggered when you click on the item.
Attributecustom-event
Typestring
Defaultnull

checked

DescriptionIndicates whether the menu item is marked.
Attributechecked
Typeboolean
Defaultfalse

manual

DescriptionIf set, the submenu will not appear automatically on a hover event.
Attributemanual
Typeboolean
Defaultfalse

offset

DescriptionOffsetting the submenu against the parent item.
Attributeoffset
Typestring
Default"0"

Eventy

NameDescription
wje-menu-item:clickIt is called when you click on a menu item.

Metódy

No public methods available for this component.

CSS Shadow Parts

NameDescription
nativeThe basic element of a menu item.
checkThe part for the item check icon.
submenu-iconThe part for the icon that indicates the presence of a submenu.
endThe section for the location of the end content of the menu item.

CSS Custom Vlastnosti

NameDescription
--wje-menu-item-colorSets the text color of the menu item. By default, it uses the value var(--wje-color).
--wje-menu-item-backgroundDefines the background color of the menu item. The default is transparent.
--wje-menu-item-color-hoverSpecifies the text color of the menu item in hover state. By default it uses var(--wje-color-contrast-8).
--wje-menu-item-background-hoverSets the background color of the menu item in hover state. By default it uses var(--wje-border-color).
--wje-menu-item-color-focusDefines the text color of the menu item in the focus state. By default it uses var(--wje-color-contrast-8).
--wje-menu-item-background-focusSpecifies the background color of the menu item in the focus state. By default it uses var(--wje-border-color).
--wje-menu-item-color-activeSets the text color of the active menu item. By default it uses var(--wje-color-contrast-8).
--wje-menu-item-background-activeSpecifies the background color of the active menu item. By default it uses var(--wje-border-color).
--wje-menu-item-padding-topSpecifies the top inner edge of the menu item. The default is .5rem.
--wje-menu-item-padding-bottomSpecifies the lower inner edge of the menu item. The default is .5rem.
--wje-menu-item-line-heightSets the line height for the text in the menu item. The default is 1.8rem.
--wje-menu-submenu-offsetSpecifies the horizontal offset of the submenu relative to its parent element.
--wje-menu-item-icon-visibilityControls the visibility of the icon in the menu item. Supports visible, hidden or collapse values.
--wje-menu-item-check-icon-displayDetermines how to display the menu item check icon. The default is flex.
--wje-menu-item-check-icon-widthSets the width of the menu item check icon. The default is 1.5rem.

Sloty

NameDescription
``Default slot for the text content of the menu item.
startA slot for content that appears at the beginning of a menu item (e.g. an icon).
endThe content slot that appears at the end of the menu item.
submenuA slot for a nested menu that appears as a submenu of this item.