Visão geral da caixa de diálogo Web Components

O componente Caixa de diálogo Ignite UI for Web Components é usado para exibir algumas informações ou solicitar ao usuário uma ação ou confirmação. Ele é mostrado em uma janela modal, o que significa que o usuário não tem permissão para interagir com o aplicativo principal até que uma determinada ação seja executada para fechar a caixa de diálogo.

Ignite UI for Web Components Dialog Example

Este exemplo demonstra como criar um componente Dialog no 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.

A maneira mais simples de exibir o componente de caixa de diálogo é usar seu show método e chamá-lo em um clique de botão.

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

O componente Dialog fornece uma open propriedade, que lhe dá a capacidade de configurar seu estado de acordo com o cenário do aplicativo.

Use a title propriedade para definir o título da caixa de diálogo. No entanto, se algum conteúdo for fornecido no title slot, ele terá precedência sobre a propriedade.

Botões de ação ou informações adicionais podem ser colocados na parte inferior da caixa de diálogo através do footer slot. Se nenhum conteúdo for adicionado lá, será mostrado um botão padrão OK que fecha a caixa de diálogo quando clicado. Caso você não queira que este botão seja mostrado, você pode definir a hideDefaultAction propriedade como true. O valor padrão é false.

Closing

Por padrão, a caixa de diálogo é fechada automaticamente quando o usuário pressiona ESC. Você pode evitar esse comportamento usando a keepOpenOnEscape propriedade. O valor padrão é false. Se houver uma lista suspensa aberta (ou qualquer outro elemento que deva ser tratado ESC internamente) na caixa de diálogo, pressionar ESC uma vez fechará a lista suspensa e pressioná-la novamente fechará a caixa de diálogo.

Use a closeOnOutsideClick propriedade para configurar se a caixa de diálogo deve ser fechada ao clicar fora dela. O valor padrão é 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

O IgcDialogComponent componente expõe várias partes CSS para dar a você controle total sobre seu estilo:

Nome	Descrição
`base`	O wrapper base da caixa de diálogo.
`title`	O contêiner de título.
`footer`	O contêiner de rodapé.
`content`	O contêiner de conteúdo.

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