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.

Usage

Primeiro, você precisa instalar o Ignite UI for Web Components executando o seguinte comando:

npm install igniteui-webcomponents

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

defineComponents(IgcDialogComponent);

Para uma introdução completa ao Ignite UI for Web Components, leia o tópico Introdução.

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>

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.

Form

Elementos de formulário podem fechar um Dialog se tiverem o atributo method="dialog". Enviar o formulário acionará o fechamento do diálogo.

Styling

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

Nome	Descrição
`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);
}