Blazor Tabs는 가볍고 사용자 친화적인 구성 요소로, 해당 콘텐츠를 탭 형식이나 일반적으로 수평으로 배치된 탭 모음으로 구성합니다. Blazor Tab을 사용하면 최종 사용자가 쉽게 클릭하여 다양한 뷰를 표시할 수 있습니다. 탭 방향, 템플릿, 기본 제공 헤더 스타일, 애니메이션, 스크롤 버튼 등 여러 가지 기능과 사용자 지정 옵션이 있습니다.
Ignite UI for Blazor 유사한 데이터 세트를 구성하고 전환합니다. 탭은 데이터 콘텐츠의 맨 위에 배치됩니다. 탭을 선택하면 해당 ID가 있는 패널이 표시됩니다. 구성 요소는 정의된 탭만(패널 없이) 사용할 수 있습니다.
Blazor Tabs Example
아래의 Blazor Tabs 예제에서는 세 개의 서로 다른 탭을 한 줄로 정렬하여 표시하므로 각 탭을 빠르고 쉽게 탐색할 수 있습니다.
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(IgbTabsModule),
typeof(IgbIconModule)
);
await builder.Build().RunAsync();
}
}
}cs
Alignment 속성은 Blazor 탭이 배치되는 방식을 제어합니다. 다음 값을 허용합니다.
Start (기본값): 탭의 너비는 콘텐츠(레이블, 아이콘 모두)에 따라 다르며 모든 탭의 패딩은 동일합니다. 첫 번째 탭은 탭 컨테이너의 왼쪽에 정렬됩니다.
Center: 탭의 너비는 내용에 따라 다르며 탭 컨테이너의 중앙을 차지합니다.
End: 탭의 너비는 내용에 따라 다르며 모든 탭의 패딩은 동일합니다. 마지막 탭은 탭 컨테이너의 오른쪽에 정렬됩니다.
Justify: 모든 탭의 너비가 동일하고 탭 컨테이너에 완전히 맞습니다.
모든 탭을 수용할 만큼 공간이 충분하지 않으면 스크롤 버튼이 표시됩니다.
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(IgbTabsModule),
typeof(IgbIconModule)
);
await builder.Build().RunAsync();
}
}
}cs
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Scrolling
사용 가능한 공간이 모든 Blazor 탭을 렌더링하기에 충분하지 않을 때 스크롤 버튼이 표시됩니다. 첫 번째 탭이 표시되면 시작 스크롤 버튼이 비활성화됩니다. 각각 마지막 탭이 표시되면 끝 스크롤 버튼이 비활성화됩니다. 스크롤 버튼 중 하나를 누르면 탭이 스크롤되어 해당 방향의 탭이 완전히 표시되거나 이미 표시되어 있으면 해당 방향의 이전/다음 탭이 표시됩니다.
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(IgbTabsModule)
);
await builder.Build().RunAsync();
}
}
}cs
각 탭에는 정보(아이콘, 텍스트 또는 둘 다)를 표시하는 기본 슬롯과 시작 및/또는 끝 부분에 추가 콘텐츠를 표시하는 prefix 및 suffix 슬롯이 있습니다.
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(IgbTabsModule),
typeof(IgbIconModule)
);
await builder.Build().RunAsync();
}
}
}cs
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/.size-small {
--ig-size: var(--ig-size-small);
}
css
Styling
구성 요소는 IgbTabs 여러 CSS 부분을 노출하여 스타일을 완전히 제어할 수 있습니다.
