<zg-dialog>

The <zg-dialog> tag is a web component that controls the styling and display for dialog modals.

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

Related Web Components

Usage

A <zg-dialog> tag can be manually inserted inside the grid as slotted content. The element can inherently be styled through CSS variables or by targeting the tag directly.

<zing-grid>
  <zg-dialog open></zg-dialog>
</zing-grid>

Attributes

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

Example Usage

<zing-grid
  <zg-dialog type="custom" label="Custom ZGDialog Example" open>
    <div>
      <p>This is a custom dialog</p>
    </div>
  </zg-dialog>
</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

<zg-dialog> can be styled by CSS variables, like so:

root: {
  --zg-dialog-background: red;
}

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

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-margin1.25rem 0 0Sets the margin of dialog footer
--zg-dialog-footer-padding.875rem 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, like so:

zg-dialog {
  padding: 2rem;
}