<zg-dialog>

Interactive Storybook Playground

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

ZGDialog Relationships
Component Relationship Type Ancestor
ZingGrid Parent Generated, Manual n/a
ZGButton Child Manual n/a
ZGCheckbox Child Manual n/a
ZGIcon Child Manual n/a
ZGInput Child Manual n/a
ZGSelect Child Manual n/a
ZGText Child Manual n/a

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>
Top

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
Top

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
Name Default Description Demo CSS Ref
--zg-dialog-background #fff Styles the background of dialog header
--zg-dialog-body-background var(--zg-dialog-background) Styles the background of dialog body
--zg-dialog-body-border 0 Styles the border of dialog body
--zg-dialog-body-border-bottom var(--zg-dialog-body-border, 0) Styles the bottom border of dialog body
--zg-dialog-body-border-left var(--zg-dialog-body-border, 0) Styles the left border of dialog body
--zg-dialog-body-border-right var(--zg-dialog-body-border, 0) Styles the right border of dialog body
--zg-dialog-body-border-top var(--zg-dialog-body-border, 0) Styles the top border of dialog body
--zg-dialog-body-margin 10px 0 Sets the margin of dialog body
--zg-dialog-body-padding 0 Sets the padding of dialog body
--zg-dialog-footer-background var(--zg-dialog-background) Styles the background of dialog footer
--zg-dialog-footer-border 0 Styles the border of dialog footer
--zg-dialog-footer-border-bottom var(--zg-dialog-footer-border, 0) Styles the bottom border of dialog footer
--zg-dialog-footer-border-left var(--zg-dialog-footer-border, 0) Styles the left border of dialog footer
--zg-dialog-footer-border-right var(--zg-dialog-footer-border, 0) Styles the right border of dialog footer
--zg-dialog-footer-border-top var(--zg-dialog-footer-border, 1px solid var(--theme-border-color)) Styles the top border of dialog footer
--zg-dialog-footer-justify-content flex-end Sets the horizontal alignment of contents in dialog footer
--zg-dialog-footer-margin 1.25rem 0 0 Sets the margin of dialog footer
--zg-dialog-footer-padding .875rem 0 0 Sets the padding of dialog footer
--zg-dialog-header-background var(--zg-dialog-background) Styles the background of dialog header
--zg-dialog-header-border 0 Styles the border of dialog header
--zg-dialog-header-border-bottom var(--zg-dialog-header-border, 0) Styles the bottom border of dialog header
--zg-dialog-header-border-left var(--zg-dialog-header-border, 0) Styles the left border of dialog header
--zg-dialog-header-border-right var(--zg-dialog-header-border, 0) Styles the right border of dialog header
--zg-dialog-header-border-top var(--zg-dialog-header-border, 0) Styles the top border of dialog header
--zg-dialog-header-color Browser's default value Sets the font folor of dialog header
--zg-dialog-header-margin 0 Sets the margin of dialog header
--zg-dialog-header-padding 0 Sets the padding of dialog header
Top

CSS Selector

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

zg-dialog {
  padding: 2rem;
}
Top

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
Name Description
body Dialog body.
body-content-wrapper Dialog content wrapper that wraps around editor labels and inputs.
body-error Dialog error message that appears top of dialog body.
dialog Dialog mask or overlay.
footer Dialog footer consisting of footer buttons (cancel and confirm).
footer-cancel Dialog footer cancel button.
footer-confirm Dialog footer confirm button.
form Dialog form consisting of header, body, and footer.
header Dialog header consisting of header label and close button.
header-close Dialog header close button.
header-label Dialog header label.
Top

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
Name Description Demo
Dialog body content.
Top

[api: <zg-dialog>]