Ignite UI for Blazor 항목 그룹을 표시할 때 매우 유용합니다. 텍스트 항목의 간단한 목록이나 다양한 레이아웃 요소의 배열을 포함하는 보다 복잡한 목록을 만들 수 있습니다. IgbList 구성 요소는 항목 행을 표시하고 하나 이상의 헤더도 지원합니다. 각 목록 항목은 완전히 템플릿화할 수 있으며 모든 유효한 HTML 또는 기타 구성 요소를 지원합니다.
다음 예는 이름과 전화번호 속성이 있는 연락처로 채워진 목록을 나타냅니다. 아래에 설명된 IgbList 구성 요소는 IgbAvatar 및 IgbButton 요소를 사용하여 사용자 경험을 풍부하게 하고 문자 및 통화 작업에 대한 아바타 사진 및 버튼 설정 기능을 노출합니다.
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(IgbAvatarModule),
typeof(IgbButtonModule),
typeof(IgbListModule),
typeof(IgbRadioModule),
typeof(IgbRadioGroupModule)
);
await builder.Build().RunAsync();
}
}
}cs
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbListModule));
razor
IgbList 구성 요소에 스타일을 적용하려면 추가 CSS 파일을 연결해야 합니다. 다음은 Blazor Web Assembly 프로젝트의 wwwroot/index.html 파일이나 Blazor Server 프로젝트의 Pages/_Host.cshtml 파일에 배치해야 합니다.
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(IgbListModule));
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(IgbListModule));
await builder.Build().RunAsync();
}
}
}cs
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Adding Avatar and Buttons
IgbList 구성 요소와 함께 다른 구성 요소 중 일부를 사용하여 경험을 풍부하게 하고 일부 기능을 추가할 수 있습니다. 이름과 전화번호 왼쪽에 멋진 사진 아바타가 있을 수 있습니다. 또한 사용자가 연락처에 문자를 보내고 전화를 걸 수 있도록 오른쪽에 몇 가지 버튼을 추가할 수 있으므로 연락처 목록 구성 요소를 업데이트하여 아바타와 버튼을 표시해 보겠습니다. 목록 항목의 슬롯 중 일부를 사용하여 이를 수행할 수 있습니다.
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(IgbAvatarModule),
typeof(IgbButtonModule),
typeof(IgbListModule),
typeof(IgbRadioModule),
typeof(IgbRadioGroupModule)
);
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(IgbAvatarModule),
typeof(IgbButtonModule),
typeof(IgbListModule)
);
await builder.Build().RunAsync();
}
}
}cs
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
이 글에서는 IgbList 컴포넌트에 대해 많은 내용을 다루었습니다. 먼저 텍스트 항목이 있는 간단한 목록을 만들었습니다. 그런 다음 연락처 항목 목록을 만들고 IgbAvatar 및 IgbButton과 같은 추가 Ignite UI for Blazor 컴포넌트를 사용하여 기능을 추가했습니다. 마지막으로 노출된 CSS 부분을 통해 컴포넌트의 모양을 변경했습니다.