Descripción general Blazor Toast

    Blazor Toast es un componente emergente pequeño y muy liviano que se utiliza para mostrar el contenido de un mensaje y notificar a los usuarios finales sobre el estado de un registro modificado. Puede colocar y mostrar fácilmente las notificaciones Blazor Toast en la parte inferior o en cualquier otra área especificada de la pantalla. O también puede descartarlas de una manera simple y fácil.

    El componente Blazor Toast se utiliza principalmente para mensajes del sistema, notificaciones push, mensajes de advertencia e información. El usuario no puede descartarlo. Este control tiene diferentes funciones, como efectos de animación, propiedad de tiempo de visualización para configurar cuánto tiempo estará visible el componente Toast, estilos y otros.

    Blazor Toast Example

    Observa el ejemplo simple de la Ignite UI for Blazor Toast que aparece a continuación. El mensaje de notificación animado aparece después de hacer clic en el botón.

    How To Use Ignite UI for Blazor Toast Notification

    Antes de usar el BlazorIgbToast, debes registrarlo de la siguiente manera:

    // in Program.cs file

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

    Para una introducción completa al Ignite UI for Blazor, lee el tema Empezar.

    También tendrás que vincular un archivo CSS adicional para aplicar el estilo alIgbCalendar componente. Lo siguiente debe colocarse en el archivo wwwroot/index.html de un proyecto de ensamblador web Blazor o en el archivo Pages/_Host.cshtml de un proyecto 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

    Usa laDisplayTime propiedad para configurar cuánto tiempo permanece visible el componente tostado. Por defecto, está configurado en 4000 milisegundos.

    Por defecto, el componente tostado se oculta automáticamente tras un periodo especificado por elDisplayTime. Puedes usarKeepOpen la propiedad para cambiar este comportamiento. De este modo, el brindis seguirá siendo 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

    Puedes estilizar las notificaciones de BlazorIgbToast directamente usando su selector de etiquetas:

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

    API References

    Additional Resources