<zg-menu-item>
Interactive Storybook Playground
The <zg-menu-item> tag is a web component defining a single menu item in the 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.
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:
<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="incomplete">Mark as Incomplete</zg-menu-item> </zg-menu> </zing-grid>
Attributes
There are no attributes available for the <zg-menu-item> web component.
CSS Variables
<zg-menu-item> can be styled with CSS variables, like so:
:root { --zg-menu-item-background: red }
Below is a list of all the associated --zg-menu-item CSS variables. Check out the full list of CSS variables or our Styling Basics guide to learn more about styling the grid.
| Name | Default | Description | Demo | CSS Ref |
|---|---|---|---|---|
| --zg-menu-item-background | var(--zg-menu-background) | Styles the background of menu item | ||
| --zg-menu-item-background_hover | var(--zg-menu-item-background, var(--zg-menu-background)) | Styles the background of menu item on hover | ||
| --zg-menu-item-border | var(--zg-menu-item-border, 0) | Styles the border of menu item | ||
| --zg-menu-item-border-bottom | var(--zg-menu-border-bottom, var(--zg-menu-item-border)) | Styles the bottom border of menu item | ||
| --zg-menu-item-border-bottom_hover | var(--zg-menu-item-border_hover, var(--zg-menu-item-border-bottom, var(--zg-menu-item-border))) | Styles the bottom border of menu item on hover | ||
| --zg-menu-item-border-left | var(--zg-menu-border-left, var(--zg-menu-item-border)) | Styles the left border of menu item | ||
| --zg-menu-item-border-left_hover | var(--zg-menu-item-border_hover, var(--zg-menu-item-border-left, var(--zg-menu-item-border))) | Styles the left border of menu item on hover | ||
| --zg-menu-item-border-right | var(--zg-menu-border-right, var(--zg-menu-item-border)) | Styles the border-right of menu item | ||
| --zg-menu-item-border-right_hover | var(--zg-menu-item-border_hover, var(--zg-menu-item-border-right, var(--zg-menu-item-border))) | Styles the right border of menu item on hover | ||
| --zg-menu-item-border-top | var(--zg-menu-border-top, var(--zg-menu-item-border)) | Styles the border-top of menu item | ||
| --zg-menu-item-border-top_hover | var(--zg-menu-item-border_hover, var(--zg-menu-item-border-top, var(--zg-menu-item-border))) | Styles the top border of menu item on hover | ||
| --zg-menu-item-border_hover | var(--zg-menu-item-border) | Styles the border of menu item on hover | ||
| --zg-menu-item-color | var(--zg-menu-color) | Styles the color of menu item | ||
| --zg-menu-item-color_hover | var(--zg-menu-item-color, var(--zg-menu-color)) | Styles the color of menu item on hover | ||
| --zg-menu-item-justify-content | flex-start | Sets the horizontal alignment of contents in menu item | ||
| --zg-menu-item-justify-content_hover | var(--zg-menu-item-justify-content, flex-start) | Sets the horizontal alignment of contents in menu item on hover | ||
| --zg-menu-item-padding | 2px 9px | Sets the padding of menu item | ||
| --zg-menu-item-padding_hover | var(--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, like so:
zg-menu-item { background: red; }
Slots
<zg-menu-item> contains placeholders to allow adding markup inside the component.
<zg-menu-item>Slotted Content</zg-menu-item>
Below is a list of all the associated ZGMenuItem slots. Check out the full list of slots.
[api: <zg-menu-item>]