<zg-card>
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>
Description
Points to an external template element to be used as the template for the card's editor.
Default Value
""
Accepted Values
"templateId"
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
"
Description
Points to an external template element to be used as the template for the card's render.
Default Value
""
Accepted Values
"myTemplateId"
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.
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 |
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.
[api: <zg-card>]