Visão geral do Web Components Toast

    O Web Components 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 Web Components 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 Web Components 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.

    Web Components Toast Example

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

    How To Use Ignite UI for Web Components Toast Notification

    Primeiro, você precisa instalar o Ignite UI for Web Components executando o seguinte comando:

    npm install igniteui-webcomponents

    import { defineComponents, IgcToastComponent } from 'igniteui-webcomponents';

defineComponents(IgcToastComponent);

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

    <igc-button onclick="toast.show()" variant="contained">Show Toast</igc-button>
<igc-toast id="toast">Toast Message</igc-toast>

    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.

    <igc-button onclick="toast.toggle()" variant="contained">Toggle Toast</igc-button>
<igc-button onclick="toast.keepOpen = !toast.keepOpen" variant="contained">Toggle keepOpen property</igc-button>
<igc-button onclick="toast.displayTime = 8000" variant="contained">Set DisplayTime to 8000</igc-button>

<igc-toast id="toast">Toast Message</igc-toast>

    Styling

    Você pode estilizar as notificações Web Components IgcToastComponent diretamente usando o seletor de tags:

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

    API References

    Additional Resources