Visão geral do React Toast

    O React Toast é um componente pop-up super leve e pequeno usado para exibir o conteúdo de uma mensagem, notificando os usuários finais sobre o status de um registro alterado. Você pode posicionar e mostrar facilmente React notificações do sistema na parte inferior ou em qualquer outra área especificada da tela. Ou você também pode descartá-los de maneira simples e fácil.

    O componente React Toast é usado principalmente para mensagens do sistema, notificações por push, mensagens de aviso e informações. Não pode ser descartado pelo usuário. Esse controle tem recursos diferentes, como efeitos de animação, propriedade de tempo de exibição para configurar por quanto tempo o componente da notificação do sistema fica visível, estilo e outros.

    React Toast Example

    Dê uma olhada no exemplo simples do Ignite UI for React Toast abaixo. A mensagem de notificação animada aparece depois de clicar no botão.

    How To Use Ignite UI for React Toast Notification

    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 IgrToast, seu CSS necessário e registrar seu módulo, assim:

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

IgrToastModule.register();

    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 notificação do sistema é usar seu show método e chamá-lo com um clique de botão.

    <IgrButton variant="contained" clicked={this.onShowButtonClicked}>
    <span>Show Toast</span>
</IgrButton>

<IgrToast ref={this.onToastRef}>
    <span>Toast Message</span>
</IgrToast>

public onToastRef(toast: IgrToast) {
    if (!toast) { return; }
    this.toastRef = toast;
}

public onShowButtonClicked() {
    if (this.toastRef) {
        this.toastRef.show();
    }
}

    Examples

    Properties

    Use a displayTime propriedade para configurar por quanto tempo o componente da notificação do sistema fica visível. Por padrão, ele é definido como 4000 milissegundos.

    Por padrão, o componente de notificação do sistema é ocultado automaticamente após um período especificado pelo displayTime. Você pode usar keepOpen a propriedade para alterar esse comportamento. Dessa forma, a notificação do sistema permanecerá visível.

    <div>
    <IgrButton variant="contained" clicked={this.onToggleButtonClicked}>
        <span>Toggle Toast</span>
    </IgrButton>
    <IgrButton variant="contained" clicked={this.onKeepOpenButtonClicked}>
        <span>Toggle keepOpen Property</span>
    </IgrButton>
    <IgrButton variant="contained" clicked={this.onDisplayTimeButtonClicked}>
        <span>Set DisplayTime to 8000</span>
    </IgrButton>
</div>

<IgrToast ref={this.onToastRef}>
    <span>Toast Message</span>
</IgrToast>

public onToastRef(toast: IgrToast) {
    if (!toast) { return; }
    this.toastRef = toast;
}

public onToggleButtonClicked() {
    if (this.toastRef) {
        this.toastRef.toggle();
    }
}

public onKeepOpenButtonClicked() {
    if (this.toastRef) {
        this.toastRef.keepOpen = !this.toastRef.keepOpen;
    }
}

public onDisplayTimeButtonClicked() {
    if (this.toastRef) {
        this.toastRef.displayTime = 8000;
    }
}

    Styling

    Você pode estilizar as notificações React IgrToast diretamente usando o seletor de tags:

    igc-toast {
  background-color: var(--ig-primary-500);
  color: var(--ig-primary-500-contrast);
}

    API References

    Additional Resources