zg-card

The <zg-card> tag is a web component that controls the styling and display for the mobile, or card view, of the grid.

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

Related Web Components

Usage

A <zg-card> tag can be manually inserted inside the grid as slotted content or automatically inserted when in mobile view.

<zing-grid
  layout="card"
  src="https://cdn.zinggrid.com/datasets/user-roles.json">
  <zg-card>
    <!-- Optional template tag -->
    <template>
      <h3>[[record.name]]</h3>
      <code>[[record.job]]</code>
    </template>
  </zg-card>
</zing-grid>

You can also use the renderer-template attribute to reference an external template.

<zing-grid
  layout="card"
  src="https://cdn.zinggrid.com/datasets/user-roles.json">
  <zg-card renderer-template="zingGridCustomCard"></zg-card>
</zing-grid>

<template id="zingGridCustomCard">
  <h3>[[record.name]]</h3>
  <code>[[record.job]]</code>
</template>

Attributes

There a couple attributes to hook into the <zg-card> lifecycle. These lifecycle hooks are for rendering and editing.

Example Usage

<zing-grid
  src="https://cdn.zinggrid.com/datasets/user-roles.json">
  <zg-card renderer="fncCallAfterTemplateTagInserted">
    <!-- Optional template tag -->
    <template>
      <h3>[[record.name]]</h3>
      <code>[[record.job]]</code>
    </template>
  </zg-card>
</zing-grid>

editor

function

Description

Sets the custom editor

Default Value

No Default Value

Accepted Values

No Example Values Demo

Description

Points to an external template element to be used as the template for the card's editor

Default Value

No Default Value

Accepted Values

No Example Values Demo

renderer

function

Description

The return value of the method is set as the innerHTML of <zg-card>. If nothing is returned, it will not change the currently rendered card. The method takes the paramters data, domCard, and rowObject.

Default Value

""

Accepted Values

  • "

    Card content

    "
Demo

Description

Points to an external template element to be used as the template for the card's render.

Default Value

""

Accepted Values

  • "myTemplateId"
Demo

CSS Variables

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

root: {
  --zg-cell-background_layout_card: red;
}
ZGCard CSS Variables and Default Values
NameDefaultDescriptionDemoCSS Ref
--zg-cell-background_layout_cardBrowser's default valueStyles the background of cards in 'card' layout-mode
--zg-cell-border-bottom_layout_cardvar(--zg-card-border, 0)Styles the bottom border of cards in 'card' layout-mode
--zg-cell-border-left_layout_cardvar(--zg-card-border, 0)Styles the left border of cards in 'card' layout-mode
--zg-cell-border-right_layout_cardvar(--zg-card-border, 0)Styles the right border of cards in 'card' layout-mode
--zg-cell-border-top_layout_cardvar(--zg-card-border, 0)Styles the top border of cards in 'card' layout-mode
--zg-cell-border_layout_card0Styles the border of cards in 'card' layout-mode
--zg-cell-color_layout_cardinheritSets the font color of cards in 'card' layout-mode
--zg-cell-font-family_layout_cardinheritSets the font family of cards in 'card' layout-mode
--zg-cell-font-size_layout_cardinheritSets the font size of cards in 'card' layout-mode
--zg-cell-font-style_layout_cardinheritSets the font family of cards in 'card' layout-mode
--zg-cell-font-weight_layout_cardinheritSets the font weight of cards in 'card' layout-mode
--zg-cell-height_layout_cardautoSets the height of cards in 'card' layout-mode
--zg-cell-line-height_layout_cardinheritSets the line height of cards in 'card' layout-mode
--zg-cell-padding_layout_cardvar(--theme-padding_y) var(--theme-padding_x)Sets the padding of cards in 'card' layout-mode
--zg-cell-transition_layout_cardBrowser's default valueSets the transition of cards in 'card' layout-mode
--zg-cell-word-break_layout_cardbreak-allSets the word break of items in cards in 'card' layout-mode

CSS Selector

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

zg-card {
  background: red;
}