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

    Before using the Blazor IgbToast, you need to register it as follows:

    // in Program.cs file

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

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

    You will also need to link an additional CSS file to apply the styling to the IgbCalendar component. The following needs to be placed in the wwwroot/index.html file in a Blazor Web Assembly project or the Pages/_Host.cshtml file in a Blazor Server project:

    <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 the DisplayTime property to configure how long the toast component is visible. By default, it's set to 4000 milliseconds.

    By default, the toast component is hidden automatically after a period specified by the DisplayTime. You can use KeepOpen property to change this behavior. In this way, the toast will remain visible.

    <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

    You can style the Blazor IgbToast notifications directly using its tag selector:

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

    API References

    Additional Resources