<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.
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>
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>
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.
CSS Selector
<zg-card>
can be styled by common CSS selectors, like so:
zg-card {
background: red;
}
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.