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

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

    import { IgrToast } 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.

    The simplest way to display the toast component is to use its show method and call it on a button click.

    <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 adisplayTime propriedade para configurar por quanto tempo o componente toast fica visível. Por padrão, está configurado para 4000 milissegundos.

    Por padrão, o componente toast é ocultado automaticamente após um período especificado por odisplayTime. Você pode usarkeepOpen a propriedade para mudar esse comportamento. Dessa forma, o brinde 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

    You can style the React IgrToast notifications directly using its tag selector:

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

    API References

    Additional Resources