Docs

<zg-card>

Interactive Storybook Playground

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

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

ZGCard Relationships
Component Relationship Type Ancestor
ZingGrid Parent Manual n/a
ZGButton Child Manual n/a
ZGCheckbox Child Manual n/a
ZGIcon Child Manual n/a
ZGInput Child Manual n/a
ZGSelect Child Manual n/a
ZGText Child Manual n/a

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, like so:

<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>
Top

Attributes

There are 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

""

Accepted Values

  • "editorVariable"
Demo

editor-template

function

Description

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

Default Value

""

Accepted Values

  • "templateId"
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

renderer-template

function

Description

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

Default Value

""

Accepted Values

  • "myTemplateId"
Demo
Top

CSS Variables

<zg-card> can be styled with CSS variables, like so:

:root {
  --zg-cell-background_layout_card: red;
}

Below is a list of all the associated --zg-card CSS variables. Check out the full list of CSS variables or our Styling Basics guide to learn more about styling the grid.

ZGCard CSS Variables and Default Values
Name Default Description Demo CSS Ref
--zg-cell-background_layout_card Browser's default value Styles the background of cards in 'card' layout-mode
--zg-cell-border-bottom_layout_card var(--zg-card-border, 0) Styles the bottom border of cards in 'card' layout-mode
--zg-cell-border-left_layout_card var(--zg-card-border, 0) Styles the left border of cards in 'card' layout-mode
--zg-cell-border-right_layout_card var(--zg-card-border, 0) Styles the right border of cards in 'card' layout-mode
--zg-cell-border-top_layout_card var(--zg-card-border, 0) Styles the top border of cards in 'card' layout-mode
--zg-cell-border_layout_card 0 Styles the border of cards in 'card' layout-mode
--zg-cell-color_layout_card inherit Sets the font color of cards in 'card' layout-mode
--zg-cell-font-family_layout_card inherit Sets the font family of cards in 'card' layout-mode
--zg-cell-font-size_layout_card inherit Sets the font size of cards in 'card' layout-mode
--zg-cell-font-style_layout_card inherit Sets the font family of cards in 'card' layout-mode
--zg-cell-font-weight_layout_card inherit Sets the font weight of cards in 'card' layout-mode
--zg-cell-height_layout_card auto Sets the height of cards in 'card' layout-mode
--zg-cell-line-height_layout_card inherit Sets the line height of cards in 'card' layout-mode
--zg-cell-padding_layout_card var(--theme-padding_y) var(--theme-padding_x) Sets the padding of cards in 'card' layout-mode
--zg-cell-transition_layout_card Browser's default value Sets the transition of cards in 'card' layout-mode
--zg-cell-word-break_layout_card break-all Sets the word break of items in cards in 'card' layout-mode
Top

CSS Selector

<zg-card> can be styled by common CSS selectors, like so:

zg-card {
  background: red;
}
Top

Slots

<zg-card> contains placeholders to allow adding markup inside the component.

<zg-card>Slotted Content</zg-card>

Below is a list of all the associated ZGCard slots. Check out the full list of slots.

ZGCard Slots
Name Description Demo
Card content.
Top

[api: <zg-card>]