Visão geral da caixa de diálogo React

    O componente Caixa de diálogo Ignite UI for React é 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 React Dialog Example

    Este exemplo demonstra como criar um componente Dialog no React.

    Usage

    Primeiro, você precisa instalar o pacote npm Ignite UI for React correspondente executando o seguinte comando:

    npm install igniteui-react

    Em seguida, você precisará importar o React IgrDialog e seu CSS necessário, da seguinte forma:

    import { IgrDialog } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

    Para obter uma introdução completa ao Ignite UI for React, 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.

    <IgrButton variant="contained" clicked={this.onDialogShow}>
    <span>Show Dialog</span>
</IgrButton>

<IgrDialog ref={this.onDialogRef}>
    <span>Dialog Message</span>
</IgrDialog>

public onDialogRef(dialog: IgrDialog) {
    if (!dialog) { return; }
    this.dialogRef = dialog;
}

public onDialogShow() {
    if (this.dialogRef) {
        this.dialogRef.show();
    }
}

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

    API References

    Additional Resources