<zg-body>

Interactive Storybook Playground

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

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

ZGBody Relationships
Component Relationship Type Ancestor
ZingGrid Parent Generated n/a
ZGRow Child Generated n/a

Related Web Components

Attributes

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

Top

CSS Variables

<zg-body> can be styled by common CSS variables, like so:

:root {
  --zg-body-background: red;
}

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

ZGBody CSS Variables and Default Values
Name Default Description Demo CSS Ref
--zg-body-background transparent Styles the background of grid body
--zg-body-border 0 Styles the border of grid body
--zg-body-border-bottom var(--zg-body-border, 0) Styles the bottom border of grid body
--zg-body-border-left var(--zg-body-border, 0) Styles the left border of grid body
--zg-body-border-right var(--zg-body-border, 0) Styles the right border of grid body
--zg-body-border-top var(--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-background linear-gradient(45deg, #f9fafb 20%, #fff) Styles the background of grid body in 'card' layout-mode
--zg-body-card-border 0 Styles the border of grid body in 'card' layout-mode
--zg-body-card-border-bottom var(--zg-body-card-border, 0) Styles the bottom border of grid body in 'card' layout-mode
--zg-body-card-border-left var(--zg-body-card-border, 0) Styles the left border of grid body in 'card' layout-mode
--zg-body-card-border-right var(--zg-body-card-border, 0) Styles the right border of grid body in 'card' layout-mode
--zg-body-card-border-top var(--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-display grid Sets display of grid body in 'card' layout-mode
--zg-body-color inherit Sets the font color of contents inside grid body
--zg-body-font-family inherit Sets the font family of contents inside grid body
--zg-body-font-size inherit Sets the font size of contents inside grid body
--zg-body-font-style inherit Sets the font style of contents inside grid body
--zg-body-font-weight inherit Sets the font weight of contents inside grid body
--zg-body-line-height inherit Sets the line-height of contents inside of grid body
Top

CSS Selector

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

zg-body {
  background: red;
}
Top

Slots

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

Top

[api: <zg-body>]