docs
Menu
Menu

API Elements

ZingGrid has a predefined set of tags (or elements) you can use. This is a definitive list of the element attributes (props) and CSS variables associated with each element.

Basic Usage

For each of the components, its reflected attribute is placed on the component. Below we show how to add a caption to ZingGrid with the ZGCaption element:

CloseCopy Copied
<zing-grid>
  <zg-caption caption="Attribute on ZGCaption"></zg-caption>
</zing-grid>

Attribute Usage

When we refer to an element, we are referring to a custom HTML tag defined by internal ZingGrid custom elements. The attributes associated with it are just like native attributes, but we have a predefined set of attributes for each tag in our library.

If no attributes are available, this means that the element is most likely structural. We still list the element for transparency.

CloseCopy Copied
<zing-grid caption="Hello World"></zing-grid>

CSS Usage

Each element in the library has a predefined set of CSS variables to adjust the styling. Using CSS variables is as simple as setting the variables in your CSS under the :root{} or zing-grid selector.

CloseCopy Copied
/* preferred usaged */
:root {
  --zg-caption-background:red;
}

/* alternative usage */
zing-grid {
  --zg-caption-background:red;
}

If no CSS variables are available, this means that the element is most likely structural, or allows for explicit custom styling based on the element's CSS selector.

CloseCopy Copied
zg-load-mask {
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background:red;
}

Join the Community

Support, extra demos, pre-releases and more

loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloading