Docs

<zg-separator>

Interactive Storybook Playground

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

ZGSeparator Relationships
Component Relationship Type Ancestor
ZGControlbar Parent Generated n/a
ZGMenu Parent Generated n/a

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>
Top

Attributes

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

Top

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
Name Default Description Demo CSS Ref
--zg-separator-border 1px solid var(--theme-border-color) Styles the border of separator in the menu
--zg-separator-border-bottom var(--zg-separator-border, 1px solid var(--theme-border-color)) Styles the bottom border of separator in the menu
--zg-separator-border-left var(--zg-separator-border, 0) Styles the left border of separator in the menu
--zg-separator-border-right var(--zg-separator-border, 1px solid var(--theme-border-color)) Styles the right border of separator in the menu
--zg-separator-border-top var(--zg-separator-border, 0) Styles the top border of separator in the menu
--zg-separator-margin 5px 0 Sets the margin of separator in the menu
Top

CSS Selector

<zg-separator> can be styled by common CSS selectors, like so:

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

Slots

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

Top

[api: <zg-separator>]