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

    Depois, você precisará importar o ReactIgrDialog e seu CSS necessário, assim:

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

    Para uma introdução completa ao Ignite UI for React, leia o tópico Comecando.

    A maneira mais simples de exibir o componente de diálogo é usar seushow método e chamá-lo com um clique no 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 Diálogo fornece umaopen propriedade que permite configurar seu estado conforme o cenário da sua aplicação.

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

    Botões de ação ou informações adicionais podem ser colocados na parte inferior do diálogo através dofooter slot. Se nenhum conteúdo for adicionado ali, um botão padrãoOK será exibido que fecha o Diálogo ao clicar. Caso você não queira que esse botão apareça, pode definir ahideDefaultAction propriedade como verdadeira. O valor padrão é falso.

    Closing

    Por padrão, o Diálogo é fechado automaticamente quando o usuário pressionaESC. Você poderia prevenir esse comportamento usando akeepOpenOnEscape propriedade. O valor padrão é falso. Se houver um menu suspenso aberto (ou qualquer outro elemento que deva ser controladoESC internamente) no diálogo, pressionarESC uma vez fecha o menu suspenso e pressioná-lo novamente fecha o diálogo.

    Use acloseOnOutsideClick propriedade para configurar se o diálogo deve ser fechado ao clicar fora dele. O valor padrão é falso.

    Form

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

    Styling

    OIgrDialog componente expõe várias partes CSS para te dar 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