Docs

Zebra Striping

ZingGrid has default behaviors for displaying zebra striping. You can achieve this through one simple attribute or CSS styling.

Default Zebra Striping

Display default striping by adding the zebra attribute to the <zing-grid> tag.

<zing-grid zebra></zing-grid>
Top

Custom Zebra Striping

To do a custom zebra color, set --theme-background-zebra in your CSS file to any color you want (Note that you’ll still need to have the zebra attribute on the <zing-grid> tag).

:root {
  --theme-background-zebra: #ef9a9a;
}
Top

Multiple Colors

Add multiple colors by passing a comma separated list to the zebra attribute, then defining those colors in your CSS file.

<zing-grid zebra="red, orange, yellow"></zing-grid>
Top

Striping the Editor Controls in Card Mode

In card mode, the default background of a 'striped' card is two-part: header and body.
In the following Default example demo, you'll see this two-toned process. This is a result of setting the generic --theme-background-zebra variable.
This is sufficient for row layout-mode, and potentially for your purposes.
If instead you need the header portion of the card to also have the zebra color, you need to set an additional variable: --zg-row-card-head-background_editor_even

:root {
    --theme-background-zebra: #ef9a9a;
    --zg-row-card-head-background_editor_even: #ef9a9a;
}

You can see the result of this in the following Adjusted example demo.

Note: If you are setting the styling with inline CSS instead of the CSS variables, you only need to set the background color to avoid the two-toned appearance.

Default

Adjusted

Top

CSS Variables

Instead of adding the zebra attribute to the <zing-grid> tag, you can add zebra striping with CSS variables.

:root {
  /* even/odd styling */
  --zg-row-body-background_odd:#ef9a9a;
  --zg-row-body-background_even:#fff59d;
}
Top

CSS Selectors

Instead of adding the zebra attribute to the <zing-grid> tag, you can add zebra striping with CSS selectors.

/* even/odd styling */
zg-body zg-row:nth-child(odd){
  background:#ef9a9a;
}
zg-body zg-row:nth-child(even) {
  background:#fff59d;
}
Top