<zg-dialog>

Version 1

Interactive Storybook Playground

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

Related Web Components

• <zing-grid>
• <zg-column>

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>

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.

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.

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.