zg-separator

The <zg-separator> tag is a web component that specifies the horizontal bar in the <zg-menu> used for separating items. The <zg-separator> element is created dynamically and should not be manually inserted by users. The separator is stylable via CSS variables or the zg-separator CSS selector.

Image of the DOM relationship for the zg-separator web component tag

Related Web Components

Usage

To show the <zg-separator> the user must enable the menu. <zg-menu> is always available through right-click interactions on the grid.

A <zg-menu> tag can be manually inserted inside the grid as slotted content:

<zing-grid 
  src="https://cdn.zinggrid.com/datasets/user-roles.json"
  context-menu="mymenu">
  <zg-menu id="mymenu" replace="true">
    <p>This content replaces the built-in menu</p>
  </zg-menu>
</zing-grid>

Attributes

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

CSS Variables

All the associated --zg-separator 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-separator-border: 1px dashed red;
}
ZGSeparator CSS Variables and Default Values
NameDefaultDescriptionDemoCSS Ref
--zg-separator-border1px solid var(--theme-border-color)Styles the border of separator in the menu
--zg-separator-border-bottomvar(--zg-separator-border, 1px solid var(--theme-border-color))Styles the bottom border of separator in the menu
--zg-separator-border-leftvar(--zg-separator-border, 0)Styles the left border of separator in the menu
--zg-separator-border-rightvar(--zg-separator-border, 1px solid var(--theme-border-color))Styles the right border of separator in the menu
--zg-separator-border-topvar(--zg-separator-border, 0)Styles the top border of separator in the menu
--zg-separator-margin5px 0Sets the margin of separator in the menu

CSS Selector

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

zg-separator {
  border: 1px dashed red;
}