zg-menu-item

The <zg-menu-item> tag is a web component defining a single menu item in grid's context menu defined by <zg-menu>. The element is typically dynamically generated, though it can be overwritten by a user's own custom <zg-menu-item> elements. The element can be styled via CSS variables or CSS selectors.

Image of the DOM relationship for the zg-menu-item web component tag

Related Web Components

Usage

The <zg-menu-item> is always available through right-click interactions on the grid. You can add items through slotted content as well:

@fixme @todo @TODO how do you slot content in zg-menu-item

<zing-grid 
  static-menu
  src="https://cdn.zinggrid.com/datasets/user-roles.json">
 <zg-menu id="myMenu" type="contextmenu" style="display:none">
    <zg-menu-item id="complete">Mark as Complete</zg-menu-item>
    <zg-menu-item id="uncomplete">Mark as Uncompelete</zg-menu-item>
  </zg-menu>
</zing-grid>

Attributes

There are no attributes variables available for the <zg-menu-item> web component.

CSS Variables

All the associated --zg-menu-item CSS variables. You can find the full list of css variables or check out our styling basics to learn more about styling the grid.

root: {
  --zg-menu-item-background: red
}
ZGMenuItem CSS Variables and Default Values
NameDefaultDescriptionDemoCSS Ref
--zg-menu-item-backgroundvar(--zg-menu-background)Styles the background of menu item
--zg-menu-item-background_hovervar(--zg-menu-item-background, var(--zg-menu-background))Styles the background of menu item on hover
--zg-menu-item-bordervar(--zg-menu-border)Styles the border of menu item
--zg-menu-item-border-bottomvar(--zg-menu-border-bottom, var(--zg-menu-item-border, var(--zg-menu-border)))Styles the bottom border of menu item
--zg-menu-item-border-bottom_hovervar(--zg-menu-item-border_hover, var(--zg-menu-item-border-bottom, var(--zg-menu-border-bottom, var(--zg-menu-item-border, var(--zg-menu-border)))))Styles the bottom border of menu item on hover
--zg-menu-item-border-leftvar(--zg-menu-border-left, var(--zg-menu-item-border, var(--zg-menu-border)))Styles the left border of menu item
--zg-menu-item-border-left_hovervar(--zg-menu-item-border_hover, var(--zg-menu-item-border-left, var(--zg-menu-border-left, var(--zg-menu-item-border, var(--zg-menu-border)))))Styles the left border of menu item on hover
--zg-menu-item-border-rightvar(--zg-menu-border-right, var(--zg-menu-item-border, var(--zg-menu-border)))Styles the border-right of menu item
--zg-menu-item-border-right_hovervar(--zg-menu-item-border_hover, var(--zg-menu-item-border-right, var(--zg-menu-border-right, var(--zg-menu-item-border, var(--zg-menu-border)))))Styles the right border of menu item on hover
--zg-menu-item-border-topvar(--zg-menu-border-top, var(--zg-menu-item-border, var(--zg-menu-border)))Styles the border-top of menu item
--zg-menu-item-border-top_hovervar(--zg-menu-item-border_hover, var(--zg-menu-item-border-top, var(--zg-menu-border-top, var(--zg-menu-item-border, var(--zg-menu-border)))))Styles the top border of menu item on hover
--zg-menu-item-border_hovervar(--zg-menu-item-border, var(--zg-menu-border))Styles the border of menu item on hover
--zg-menu-item-colorvar(--zg-menu-color)Styles the color of menu item
--zg-menu-item-color_hovervar(--zg-menu-item-color, var(--zg-menu-color))Styles the color of menu item on hover
--zg-menu-item-displayinline-flexStyles the display of menu item
--zg-menu-item-justify-contentflex-startSets the horizontal alignment of contents in menu item
--zg-menu-item-justify-content_hovervar(--zg-menu-item-justify-content, flex-start)Sets the horizontal alignment of contents in menu item on hover
--zg-menu-item-justify-content_hovervar(--zg-menu-item-justify-content, flex-start)Sets the horizontal alignment of contents in menu item on hover
--zg-menu-item-padding2px 9pxSets the padding of menu item
--zg-menu-item-padding_hovervar(--zg-menu-item-padding, 2px 9px)Sets the padding of menu item on hover

CSS Selector

<zg-menu-item> can be styled by common CSS selectors.

zg-menu-item {
  background: red;
}