Descripción general de la tostada Blazor

    Blazor Toast es un componente emergente pequeño y súper 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 del sistema Blazor en la parte inferior o en cualquier otra área especificada de la pantalla. O también puedes descartarlos de una forma sencilla y fácil.

    El componente Blazor Toast se utiliza principalmente para mensajes del sistema, notificaciones automáticas, mensajes de advertencia e información. No puede ser descartado por el usuario. Este control tiene diferentes características como efectos de animación, propiedad de tiempo de visualización para configurar cuánto tiempo está visible el componente del sistema, estilo y otras.

    Blazor Toast Example

    Eche un vistazo al ejemplo simple Ignite UI for Blazor Toast 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 utilizar Blazor IgbToast, debe registrarlo de la siguiente manera:

    // in Program.cs file

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

    Para obtener una introducción completa a Ignite UI for Blazor, lea el tema Introducción.

    También deberá vincular un archivo CSS adicional para aplicar el estilo al componente IgbCalendar. Es necesario colocar lo siguiente en el archivo wwwroot/index.html de un proyecto Blazor Web Assembly 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

    Utilice la propiedad DisplayTime para configurar durante cuánto tiempo está visible el componente del sistema. De forma predeterminada, está configurado en 4000 milisegundos.

    De forma predeterminada, el componente del sistema se oculta automáticamente después de un período especificado por DisplayTime. Puede utilizar la propiedad KeepOpen para cambiar este comportamiento. De esta forma, la tostada quedará 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

    Puede diseñar las notificaciones Blazor IgbToast directamente usando su selector de etiquetas:

    igc-toast {
    background: #011627;
    color: #ECAA53;
    outline-color: #ECAA53;
}

    API References

    Additional Resources