<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;
}

CSS Shadow Parts

<zg-dialog> exposed elements within the shadow can be styled by CSS shadow parts, like so:

zg-dialog::part(body) {
  background-color: red;
}

Below is a list of all the associated ZGDialog shadow parts. Check out the full list of CSS shadow parts or our Styling Basics guide to learn more about styling the grid.

ZGDialog CSS Shadow Parts
NameDescriptionDemo
bodyDialog body.
body-content-wrapperDialog content wrapper that wraps around editor labels and inputs.
body-errorDialog error message that appears top of dialog body.
dialogDialog mask or overlay.
footerDialog footer consisting of footer buttons (cancel and confirm).
footer-cancelDialog footer cancel button.
footer-confirmDialog footer confirm button.
formDialog form consisting of header, body, and footer.
headerDialog header consisting of header label and close button.
header-closeDialog header close button.
header-labelDialog header label.

Slots

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

<zg-dialog>Slotted Content</zg-dialog>

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

ZGDialog Slots
NameDescriptionDemo
Dialog body content.

[api: <zg-dialog>]