zg-focus

The <zg-focus> tag is a web component that is used as a container for the focus of cell(s) and used as a CSS target for styling by the developer. The <zg-focus> web component should not be accessed specifically beyond styling.

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

Related Web Components

Usage

The <zg-focus> element is a generated element added to <zing-grid> when the selector attribute is defined.

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

Attributes

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

CSS Variables

All the associated --zg-focus 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-focus-border-top: 1px solid red;
}
ZGFocus CSS Variables and Default Values
NameDefaultDescriptionDemoCSS Ref
--zg-focus-border2px solid var(--theme-color-primary)Styles the border of cells on focus
--zg-focus-border-bottomvar(--zg-focus-border, 2px solid var(--theme-color-primary))Sets the bottom border of cells on focus
--zg-focus-border-leftvar(--zg-focus-border, 2px solid var(--theme-color-primary))Sets the left border of cells on focus
--zg-focus-border-rightvar(--zg-focus-border, 2px solid var(--theme-color-primary))Sets the right border of cells on focus
--zg-focus-border-topvar(--zg-focus-border, 2px solid var(--theme-color-primary))Sets the top border of cells on focus
--zg-focus-bottom-transformnoneSets the transform of bottom border of cells on focus
--zg-focus-left-transformnoneSets the transform of left border of cells on focus
--zg-focus-right-transformnoneSets the transform of right border of cells on focus
--zg-focus-top-transformnoneSets the transform of top border of cells on focus

CSS Selector

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

zg-focus {
  border: 1px solid red;
}