zg-body

<zg-body> tag is created dynamically by the ZingGrid library, as such should not be manually added by the developer. However the user can style <zg-body> through CSS. Styling should be applied through CSS variables or targeting the tag directly.

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

Related Web Components

Attributes

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

CSS Variables

All the associated --zg-body 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-body-background: red;
}
ZGBody CSS Variables and Default Values
NameDefaultDescriptionDemoCSS Ref
--zg-body-backgroundtransparentStyles the background of grid body
--zg-body-border0Styles the border of grid body
--zg-body-border-bottomvar(--zg-body-border, 0)Styles the bottom border of grid body
--zg-body-border-leftvar(--zg-body-border, 0)Styles the left border of grid body
--zg-body-border-rightvar(--zg-body-border, 0)Styles the right border of grid body
--zg-body-border-topvar(--zg-body-border, 0)Styles the top border of grid body. Note: If `--zg-row-border-top` set, it will override `--zg-body-border-top`.
--zg-body-card-backgroundlinear-gradient(45deg, #f9fafb 20%, #fff)Styles the background of grid body in 'card' layout-mode
--zg-body-card-border0Styles the border of grid body in 'card' layout-mode
--zg-body-card-border-bottomvar(--zg-body-card-border, 0)Styles the bottom border of grid body in 'card' layout-mode
--zg-body-card-border-leftvar(--zg-body-card-border, 0)Styles the left border of grid body in 'card' layout-mode
--zg-body-card-border-rightvar(--zg-body-card-border, 0)Styles the right border of grid body in 'card' layout-mode
--zg-body-card-border-topvar(--zg-body-card-border, 0)Styles the top border of grid body in 'card' layout-mode. Note: If `--zg-row-border-top` set in 'card' layout-mode it will override `--zg-body-border-top`.
--zg-body-card-displaygridSets display of grid body in 'card' layout-mode
--zg-body-colorinheritSets the font color of contents inside grid body
--zg-body-font-familyinheritSets the font family of contents inside grid body
--zg-body-font-sizeinheritSets the font size of contents inside grid body
--zg-body-font-styleinheritSets the font style of contents inside grid body
--zg-body-font-weightinheritSets the font weight of contents inside grid body
--zg-body-line-heightinheritSets the line-height of contents inside of grid body

CSS Selector

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

zg-body {
  background: red;
}