El componente Ignite UI for Blazor Ripple crea una animación en respuesta a un toque o a un clic del ratón.
Blazor Ejemplo de Ripple
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));
await builder.Build().RunAsync();
}
}
}cs
Antes de usar IgbRipple, debe registrarlo de la siguiente manera:
// in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbRippleModule));razor
También deberá vincular un archivo CSS adicional para aplicar el estilo al IgbRipple 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:
Puede agregar el componente IgbRipple a cualquier elemento web siempre que su propiedad position CSS esté establecida en cualquier otro valor que no sea static;
Ejemplos
Color
Puede cambiar el color de la onda estableciendo la propiedad CSS--color en cualquier color CSS válido:
igc-ripple { --color: olive; }css
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(IgbRippleModule)
);
await builder.Build().RunAsync();
}
}
}cs
