zg-status

The <zg-status> tag is a web component that is used to display messages to the user, such as errors and verifications of CRUD actions. <zg-status> is created dynamically and should not be inserted by the user. You can style the <zg-status> through CSS variables or the zg-status CSS selector.

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

Related Web Components

Usage

A <zg-status> tag can be manually inserted inside the grid as slotted content or automatically inserted when the caption is enabled via caption attribute. The caption is stylable via CSS variables or the zg-status CSS selector.

You can use the caption attribute:

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

You can slot the <zg-status> tag as well:

<zing-grid>
  <zg-status>Hello World</zg-status>
</zing-grid>

Attributes

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

CSS Variables

All the associated --zg-status CSS variables. You can find the full list of css variables or check out our styling basics to learn more about styling the grid.

<zg-status> has generic CSS variables that control all use cases, as well as specific overrides for its states (success, error, etc.). Generic styles are styled in the form of 'element-property' (--zg-status-background), whereas overrides are 'element-state-property' (--zg-status-success-background). For example, to update the background color of the built-in 'success' state, you'll need to use the more specific variable, since it is already defined in the default template.

root: {
  --zg-status-background: red;
}
ZGStatus CSS Variables and Default Values
NameDefaultDescriptionDemoCSS Ref
--zg-status-align-itemscenterSets the alignment of inner elements of status
--zg-status-background#333Styles the background of status
--zg-status-border0Styles the border of status
--zg-status-border-bottomvar(--zg-status-border, 0)Styles the bottom border of status
--zg-status-border-leftvar(--zg-status-border, 0)Styles the left border of status
--zg-status-border-rightvar(--zg-status-border, 0)Styles the right border of status
--zg-status-border-topvar(--zg-status-border, 1px solid var(--theme-border-color))Styles the top border of status
--zg-status-box-shadownoneApplies a box shadow behind status
--zg-status-color#fffSets the font color of contents in status
--zg-status-error-backgroundredStyles the background of 'error' status
--zg-status-error-color#fffSets the font color of contents of 'error' status
--zg-status-font-familyvar(--theme-font-family)Sets the font family of contents in status
--zg-status-font-sizeinheritSets the font size of contents in status
--zg-status-justify-contentflex-startSets the horizontal alignment of contents in status
--zg-status-line-height1Sets the line height of status
--zg-status-margin0Sets the margin of status
--zg-status-max-width300pxSets the max-width of the status-message area
--zg-status-min-height27pxSets the min-height of status
--zg-status-padding14px var(--theme-padding_x)Sets the padding of status
--zg-status-success-backgroundgreenStyles the background of 'success' status
--zg-status-success-color#fffSets the font color of contents of 'success' status

CSS Selector

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

zg-status {
  font-size: 2rem;
}