Web Components Dialog Overview

The Ignite UI for Web Components Dialog component is used to display some information or prompt the user for an action or confirmation. It is shown in a modal window, which means that the user is not allowed to interact with the main app until a certain action is performed that closes the dialog.

Ignite UI for Web Components Dialog Example

This sample demonstrates how to create a Dialog component in Web Components.

import {defineComponents, IgcDialogComponent, IgcButtonComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcDialogComponent, IgcButtonComponent);
export class DialogOverview {
    constructor() {
    }
}

new DialogOverview();
ts

<html>

<head>
  <title>Dialog Overview</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-button onclick="dialog.show()" variant="contained">Show Dialog</igc-button>

      <igc-dialog id="dialog" title="Confirmation">
        <p>Are you sure you want to delete the Annual_Report_2016.pdf and Annual_Report_2017.pdf files?</p>
        <igc-button slot="footer" onclick="dialog.hide()" variant="flat">Cancel</igc-button>
        <igc-button slot="footer" onclick="dialog.hide()" variant="flat">OK</igc-button>
      </igc-dialog>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

Usage

First, you need to install the Ignite UI for Web Components by running the following command:

npm install igniteui-webcomponents
cmd

import { defineComponents, IgcDialogComponent } from 'igniteui-webcomponents';

defineComponents(IgcDialogComponent);
ts

For a complete introduction to the Ignite UI for Web Components, read the Getting Started topic.

The simplest way to display the dialog component is to use its show method and call it on a button click.

<igc-button onclick="dialog.show()" variant="contained">Show Dialog</igc-button>

<igc-dialog id="dialog" title="Confirmation">
    <p>Are you sure you want to delete the Annual_Report_2016.pdf and Annual_Report_2017.pdf files?</p>
    <igc-button slot="footer" onclick="dialog.close()" variant="flat">Cancel</igc-button>
    <igc-button slot="footer" onclick="dialog.close()" variant="flat">OK</igc-button>
</igc-dialog>
html

The Dialog component provides an open property, which gives you the ability to configure its state as per your application scenario.

Use the title property to set the title of the dialog. However, if any content is provided in the title slot, it will take precedence over the property.

Action buttons or additional information can be placed in the bottom part of the dialog via the footer slot. If no content is added there, a default OK button will be shown that closes the Dialog when clicked. In case you do not want this button to be shown you can set the hideDefaultAction property to true. The default value is false.

Closing

By default, the Dialog is closed automatically when the user presses ESC. You could prevent this behavior using the keepOpenOnEscape property. The default value is false. If there is an open dropdown (or any other element that should handle ESC internally) in the dialog, pressing ESC once will close the dropdown and pressing it again will close the dialog.

Use the closeOnOutsideClick property to configure if the dialog should be closed when clicking outside of it. The default value is false.

import {defineComponents, IgcDialogComponent, IgcSwitchComponent, IgcButtonComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcDialogComponent, IgcButtonComponent, IgcSwitchComponent);
export class DialogClosingVariations {
    constructor() {
        const dialog = document.getElementById('dialog') as IgcDialogComponent;
        const keepOpenOnEscSwitch = document.getElementById('keepOpenOnEscSwitch') as IgcSwitchComponent;
        const closeOnOutsideClickSwitch = document.getElementById('closeOnOutsideClickSwitch') as IgcSwitchComponent;

        closeOnOutsideClickSwitch!.addEventListener("igcChange", (ev: CustomEvent) => {
            dialog.closeOnOutsideClick = ev.detail.checked;
        });

        keepOpenOnEscSwitch!.addEventListener("igcChange", (ev: CustomEvent) => {
            dialog.keepOpenOnEscape = ev.detail.checked;
        });
    }
}

new DialogClosingVariations();
ts

<html>

<head>
  <title>Dialog Closing Variations</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-switch id="keepOpenOnEscSwitch" label-position="before">keepOpenOnEscape</igc-switch>
      <igc-switch id="closeOnOutsideClickSwitch" label-position="before">closeOnOutsideClick</igc-switch>

      <igc-button onclick="dialog.show()" variant="contained">Show Dialog</igc-button>

      <igc-dialog id="dialog" title="Confirmation">
        <p>Are you sure you want to delete the Annual_Report_2016.pdf and Annual_Report_2017.pdf files?</p>
        <igc-button slot="footer" onclick="dialog.hide()" variant="flat">Cancel</igc-button>
        <igc-button slot="footer" onclick="dialog.hide()" variant="flat">OK</igc-button>
      </igc-dialog>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Form

Form elements can close a Dialog if they have the attribute method="dialog". Submitting the form will trigger the closing of the dialog.

import { defineComponents, IgcDialogComponent, IgcButtonComponent, IgcInputComponent, registerIconFromText } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcDialogComponent, IgcButtonComponent, IgcInputComponent);

const userIcon =
'<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.71,12.71a6,6,0,1,0-7.42,0,10,10,0,0,0-6.22,8.18,1,1,0,0,0,2,.22,8,8,0,0,1,15.9,0,1,1,0,0,0,1,.89h.11a1,1,0,0,0,.88-1.1A10,10,0,0,0,15.71,12.71ZM12,12a4,4,0,1,1,4-4A4,4,0,0,1,12,12Z"/></svg>';

const passwordIcon =
'<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.0151 13.6556C14.8093 14.3587 16.9279 13.9853 18.3777 12.5355C20.3304 10.5829 20.3304 7.41709 18.3777 5.46447C16.4251 3.51184 13.2593 3.51184 11.3067 5.46447C9.85687 6.91426 9.48353 9.03288 10.1866 10.8271M12.9964 13.6742L6.82843 19.8422L4.2357 19.6065L4 17.0138L10.168 10.8458M15.5493 8.31568V8.29289" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';

export class DialogForm {
    constructor() {
        registerIconFromText("username", userIcon);
        registerIconFromText("password", passwordIcon);
    }
}

new DialogForm();
ts

<html>

<head>
  <title>Dialog Form</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-button onclick="dialog.show()" variant="contained">Show Dialog</igc-button>

      <igc-dialog id="dialog" title="Login">
        <form id="form" method="dialog">
          <igc-input label="Username">
            <igc-icon name="username" slot="prefix"></igc-icon>
          </igc-input>
          <br>
          <igc-input type="password" label="Password">
            <igc-icon name="password" slot="prefix"></igc-icon>
          </igc-input>
          <br>
          <div style="display: flex; justify-content: flex-end;">
            <igc-button type="reset" variant="flat">Reset</igc-button>
            <igc-button type="submit" variant="flat">Submit</igc-button>
          </div>
        </form>

        <div slot="footer">
          <igc-button>Create an account</igc-button>
        </div>
      </igc-dialog>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Styling

The IgcDialogComponent component exposes several CSS parts to give you full control over its style:

Name	Description
`base`	The base wrapper of the dialog.
`title`	The title container.
`footer`	The footer container.
`content`	The content container.

igc-dialog::part(content) {
  background: var(--ig-secondary-800);
  color: var(--ig-secondary-800-contrast);
}

igc-dialog::part(title),
igc-dialog::part(footer) {
  background: var(--ig-secondary-800);
  color: var(--ig-warn-500);
}
css

import {defineComponents, IgcDialogComponent, IgcButtonComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './DialogStyling.css';

defineComponents(IgcDialogComponent, IgcButtonComponent);
export class DialogStyling {
    constructor() {
    }
}

new DialogStyling();
ts

<html>

<head>
  <title>Dialog Styling</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-button onclick="dialog.show()" variant="contained">Show Dialog</igc-button>

      <igc-dialog id="dialog" title="Confirmation">
        <h1 slot="title">Styled Title</h1>
        <p>Are you sure you want to delete the Annual_Report_2016.pdf and Annual_Report_2017.pdf files?</p>
        <igc-button slot="footer" onclick="dialog.toggle()" variant="flat">Cancel</igc-button>
        <igc-button slot="footer" onclick="dialog.toggle()" variant="flat">OK</igc-button>
      </igc-dialog>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

igc-dialog::part(content) {
    background: #011627;
    color:white;
}

igc-dialog::part(title),
igc-dialog::part(footer) {
    background: #011627;
    color:#ECAA53;
}css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css