zg-selector-mask

The <zg-selector-mask> tag is a web component that is used to wrap the cells during user selection for styling purposes. The element should not be manually inserted by the user. The selector mask is stylable via CSS variables or the zg-selector-mask CSS selector.

Image of the DOM relationship for the zg-selector-mask web component tag

Related Web Components

Usage

A <zg-selector-mask> tag can be triggered by adding the selector attribute on the <zing-grid> tag.

<zing-grid selector
  src="https://cdn.zinggrid.com/datasets/user-roles.json">
</zing-grid>

Attributes

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

CSS Variables

All the associated --zg-selector-mask 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-selector-mask-background: red;
}
ZGSelectorMask CSS Variables and Default Values
NameDefaultDescriptionDemoCSS Ref
--zg-selector-mask-backgroundvar(--theme-color-secondary)Styles the background of selector mask
--zg-selector-mask-opacity.1Sets the opacity of selector mask

CSS Selector

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

zg-selector-mask {
  background: red;
}