zg-dialog

The <zg-dialog> 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-dialog 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-dialog> lifecycle. These lifecycle hooks are for opening, closing, 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>

cancel

String

Description

Callback method to call on custom dialog when the dialog's "cancel" button is clicked.

Default Value

N/A

Accepted Values

  • "functionName"
Demo

confirm

String

Description

Callback method to call on custom dialog when the dialog's "confirm" button is clicked.

Default Value

N/A

Accepted Values

  • "functionName"
Demo

label

String

Description

Sets the dialog's header 'label' text.

Default Value

""

Accepted Values

  • "Are you sure you want to continue?"
Demo

open

String

Description

The presence of the specification-standard open attribute designates whether the dialog is shown or hidden.

Default Value

""

Accepted Values

  • N/A
Demo

CSS Variables

All the associated --zg-dialog 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-dialog-background: red;
}
ZGDialog CSS Variables and Default Values
NameDefaultDescriptionDemoCSS Ref
--zg-dialog-background#fffStyles the background of dialog header
--zg-dialog-body-backgroundvar(--zg-dialog-background)Styles the background of dialog body
--zg-dialog-body-border0Styles the border of dialog body
--zg-dialog-body-border-bottomvar(--zg-dialog-body-border, 0)Styles the bottom border of dialog body
--zg-dialog-body-border-leftvar(--zg-dialog-body-border, 0)Styles the left border of dialog body
--zg-dialog-body-border-rightvar(--zg-dialog-body-border, 0)Styles the right border of dialog body
--zg-dialog-body-border-topvar(--zg-dialog-body-border, 0)Styles the top border of dialog body
--zg-dialog-body-margin10px 0Sets the margin of dialog body
--zg-dialog-body-padding0Sets the padding of dialog body
--zg-dialog-footer-backgroundvar(--zg-dialog-background)Styles the background of dialog footer
--zg-dialog-footer-border0Styles the border of dialog footer
--zg-dialog-footer-border-bottomvar(--zg-dialog-footer-border, 0)Styles the bottom border of dialog footer
--zg-dialog-footer-border-leftvar(--zg-dialog-footer-border, 0)Styles the left border of dialog footer
--zg-dialog-footer-border-rightvar(--zg-dialog-footer-border, 0)Styles the right border of dialog footer
--zg-dialog-footer-border-topvar(--zg-dialog-footer-border, 1px solid var(--theme-border-color))Styles the top border of dialog footer
--zg-dialog-footer-justify-contentflex-endSets the horizontal alignment of contents in dialog footer
--zg-dialog-footer-margin0Sets the margin of dialog footer
--zg-dialog-footer-padding10px 0 0Sets the padding of dialog footer
--zg-dialog-header-backgroundvar(--zg-dialog-background)Styles the background of dialog header
--zg-dialog-header-border0Styles the border of dialog header
--zg-dialog-header-border-bottomvar(--zg-dialog-header-border, 0)Styles the bottom border of dialog header
--zg-dialog-header-border-leftvar(--zg-dialog-header-border, 0)Styles the left border of dialog header
--zg-dialog-header-border-rightvar(--zg-dialog-header-border, 0)Styles the right border of dialog header
--zg-dialog-header-border-topvar(--zg-dialog-header-border, 0)Styles the top border of dialog header
--zg-dialog-header-colorBrowser's default valueSets the font folor of dialog header
--zg-dialog-header-margin0Sets the margin of dialog header
--zg-dialog-header-padding0Sets the padding of dialog header

CSS Selector

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

zg-dialog {
  padding: 2rem;
}