Visão geral Blazor Toast

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

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

    Blazor Toast Example

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

    How To Use Ignite UI for Blazor Toast Notification

    Antes de usar o Blazor IgbToast, você precisa registrá-lo da seguinte forma:

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbToastModule));

    Para uma introdução completa à Ignite UI for Blazor, leia o tópico Introdução.

    Você também precisará vincular um arquivo CSS adicional para aplicar o estilo ao componente IgbCalendar. O seguinte precisa ser colocado no arquivo wwwroot/index.html em um projeto Blazor Web Assembly ou no arquivo Pages/_Host.cshtml em um projeto Blazor Server:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

    <IgbButton @onclick=@OnToastButtonClick Variant=@ButtonVariant.Contained>Show Toast</IgbButton>
<IgbToast @ref="ToastRef">Toast Message</IgbToast>

@code {
    public IgbToast ToastRef { get; set; }

    protected override void OnInitialized()
    {
    }

    public void OnToastButtonClick(MouseEventArgs args)
    {
        if (this.ToastRef != null)
        {
            this.ToastRef.Show();
        }
    }
}

    Examples

    Properties

    Use a propriedade DisplayTime para configurar por quanto tempo o componente toast fica visível. Por padrão, ele é definido como 4000 milissegundos.

    Por padrão, o componente toast é ocultado automaticamente após um período especificado pelo DisplayTime. Você pode usar a propriedade KeepOpen para alterar esse comportamento. Dessa forma, o toast permanecerá visível.

    <IgbButton @onclick=@OnToggleToastButtonClick Variant="ButtonVariant.Contained">Toggle Toast</IgbButton>
<IgbButton @onclick=@OnToggleKeepOpenButtonClick Variant="ButtonVariant.Contained">Toggle KeepOpen Property</IgbButton>
<IgbButton @onclick=@OnDisplayTimeButtonClick Variant="ButtonVariant.Contained">Set DisplayTime to 8000</IgbButton>

<IgbToast @ref=ToastRef>Toast Message</IgbToast>

@code {
    public IgbToast ToastRef{  get;  set; }

    protected override void OnInitialized()
    {
    }

    public void OnToggleToastButtonClick(MouseEventArgs args)
    {
        if (this.ToastRef != null)
        {
            this.ToastRef.Toggle();
        }
    }

    public void OnToggleKeepOpenButtonClick(MouseEventArgs args)
    {
        if (this.ToastRef != null)
        {
            this.ToastRef.KeepOpen = !this.ToastRef.KeepOpen;
        }
    }

    public void OnDisplayTimeButtonClick(MouseEventArgs args)
    {
        if (this.ToastRef != null)
        {
            this.ToastRef.DisplayTime = 8000;
        }
    }
}

    Styling

    Você pode estilizar as notificações Blazor IgbToast diretamente usando seu seletor de tags:

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

    API References

    Additional Resources