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 e seu CSS necessário, da seguinte forma:

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

    <IgrButton variant="contained" onClick={onShowButtonClicked}>
    <span>Show Toast</span>
</IgrButton>

<IgrToast ref={toastRef}>
    <span>Toast Message</span>
</IgrToast>

const toastRef = useRef<IgrToast>(null);

const onShowButtonClicked = () => {
        toastRef.current?.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" onClick={onToggleButtonClicked}>
        <span>Toggle Toast</span>
    </IgrButton>
    <IgrButton variant="contained" onClick={onKeepOpenButtonClicked}>
        <span>Toggle keepOpen Property</span>
    </IgrButton>
    <IgrButton variant="contained" onClick={onDisplayTimeButtonClicked}>
        <span>Set DisplayTime to 8000</span>
    </IgrButton>
</div>

<IgrToast ref={toastRef}>
    <span>Toast Message</span>
</IgrToast>

const toastRef = useRef<IgrToast>(null);

const onToggleButtonClicked = () => {
    toastRef.current?.toggle();
};

const onKeepOpenButtonClicked = () => {
    if (toastRef.current) {
        toastRef.current.keepOpen = !toastRef.current.keepOpen;
    }
};

const onDisplayTimeButtonClicked = () => {
    if (toastRef.current) {
        toastRef.current.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