<zg-separator>

The <zg-separator> tag is a web component that specifies the horizontal bar in the <zg-menu> to separate items. The <zg-separator> element is created dynamically and should not be manually inserted by users. The separator is styleable 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 first 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 available for the <zg-separator> web component.

CSS Variables

<zg-separator> can be styled with CSS variables, like so:

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

Below is a list of all the associated --zg-separator CSS variables. Check out the full list of CSS variables or our Styling Basics guide to learn more about styling the grid.

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, like so:

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