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.
Ejemplo de tostada Blazor
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.
EXAMPLE
MODULES
RAZOR
CSS
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbButtonModule),
typeof(IgbToastModule)
);
await builder.Build().RunAsync();
}
}
}cs
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Blazor completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Cómo usar Ignite UI for Blazor Toast
Antes de usar el Blazor IgbToast, debe registrarlo de la siguiente manera:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbToastModule));
razor
Para obtener una introducción completa a la Ignite UI for Blazor, lea el tema Primeros pasos.
También deberá vincular un archivo CSS adicional para aplicar el estilo al IgbCalendar componente. Lo siguiente debe colocarse en el archivo wwwroot/index.html de un proyecto de Blazor Web Assembly o en el archivo Pages/_Host.cshtml de un proyecto de Blazor Server:
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.
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbButtonModule),
typeof(IgbToastModule)
);
await builder.Build().RunAsync();
}
}
}cs
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbButtonModule),
typeof(IgbToastModule)
);
await builder.Build().RunAsync();
}
}
}cs