Docs

Styling

ZingGrid is styleable through CSS selectors like any other element, or you can take advantage of ZingGrid's CSS variables. Use our built-in themes or create custom themes to easily switch up the look of your grid.

CSS Variables

ZingGrid provides CSS variables as an alternative way to style your grid.

:root {
  --zing-grid-font-family: cursive;
}
Top

Component Selectors

You can use native CSS selectors to syle your grid.

zing-grid {
  font-family: cursive;
}
Top

Themes

Change themes easily by changing the theme attribute on <zing-grid>. Choose from these built-in themes: Android, Black, Dark, or iOS. For the default theme, just omit the attribute (or set the value to default).

Custom Theme

Build your own theme (with optional custom icons). Use the built-in CSS variables to customize your grid, from colors and fonts, to borders and spacing.

Custom CSS File

Create a new .css file and add the following code:

:host([theme="mytheme"]) {
  /* Add css vars here */
}

Change the theme value, theme="mytheme" to a name of your choosing.

You must name the .css file the same as you set in the :host attribute value. ZingGrid replaces the file path with the name of the file so that the selector inside the CSS file matches. For example, to enable your custom theme, you would call ZingGrid as <zing-grid theme="path/to/mytheme.css">. When the grid is rendered, the library changes that path to <zing-grid theme="mytheme"> so that the selector :host([theme="mytheme"]) matches.

Top

Custom SVG File (Optional)

Now that the custom theme has been named, you can provide a matching SVG file (mytheme.svg) in the same location as the .css file. This will be automatically loaded into ZingGrid.
The grid uses SVG symbols as the default icons. In your new SVG file, just add new symbols for the icons you wish to replace. Any icons not replaced will show the default icon instead

<svg id="mytheme" xmlns="http://www.w3.org/2000/svg">
  <!-- checked -->
  <symbol id="checked" viewBox="0 0 24 24">
    <path .../>
  </symbol>
  <!-- Edit -->
  <symbol id="edit" viewBox="0 0 24 24">
    <path .../>
  </symbol>
</svg>

Remember to set the id attribute to your theme name

Top