Ignite UI for Blazor 터치 또는 마우스 클릭에 응답하여 애니메이션을 만듭니다.
Blazor 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
// in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbRippleModule));razor
IgbRipple 구성 요소에 스타일을 적용하려면 추가 CSS 파일을 연결해야 합니다. 다음은 Blazor Web Assembly 프로젝트의 wwwroot/index.html 파일이나 Blazor Server 프로젝트의 Pages/_Host.cshtml 파일에 배치해야 합니다.
다음을 추가할 수 있습니다. IgbRipple CSS가 있는 한 모든 웹 요소에 대한 구성 요소 position 속성이 다음 이외의 다른 값으로 설정되었습니다. static;
예
색상
--color CSS 속성을 유효한 CSS 색상으로 설정하여 잔물결 색상을 변경할 수 있습니다.
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
