Ignite UI for Blazor 드롭다운에 배치된 항목 목록에서 단일 선택을 허용합니다. 이 폼 컨트롤은 단일 또는 여러 문자 일치에 따라 선택을 포함한 빠른 항목 목록 탐색을 제공합니다.
Blazor Select Example
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;
// required for registering IgniteUIBlazorusing IgniteUI.Blazor.Controls;
namespaceInfragistics.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 Infragistics Blazor
builder.Services.AddIgniteUIBlazor(typeof(IgbSelectModule));
await builder.Build().RunAsync();
}
}
}cs
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbSelectModule));
razor
IgbSelect 구성 요소에 스타일을 적용하려면 추가 CSS 파일을 연결해야 합니다. 다음은 Blazor Web Assembly 프로젝트의 wwwroot/index.html 파일이나 Blazor Server 프로젝트의 Pages/_Host.cshtml 파일에 배치해야 합니다.
IgbSelect 구성 요소는 구성 요소 내에서 Form 사용할 수 있으므로 등록할 속성을 노출 Name 합니다. 또한 a Label와 Placeholder 속성이 있습니다. 이 Outlined 속성은 Material 테마와 관련하여 스타일 지정 목적으로만 사용됩니다. 기본 슬롯을 제외하고 구성 요소는 , footer, helper-text, prefix,를 suffix toggle-icon 포함한 header 몇 가지 다른 슬롯을 제공합니다. 구성 요소 크기는 CSS 변수를 사용하여--ig-size 변경할 수 있습니다.
Item
이 IgbSelectItem 구성 요소를 사용하면 사용자가 사용할 옵션 목록을 선언적으로 지정할 수 있습니다. IgbSelect 제어. 각 항목은 Value 선택 시 전달하는 데이터를 나타내는 속성입니다. 이 IgbSelectItem 항목의 텍스트 내용을 지정할 수 있는 기본 슬롯이 있습니다. 이 텍스트 내용은 다음과 같은 경우 값으로 사용됩니다. Value 속성이 에 없습니다. IgbSelectItem. 또한 이전 또는 이후에 렌더링할 사용자 지정 콘텐츠를 제공할 수도 있습니다. IgbSelectItem를 사용하는 콘텐츠 prefix 그리고 suffix 슬롯. 를 설정하여 선택한 항목을 미리 정의할 수 있습니다. Selected 재산. 를 통해 일부 또는 모든 항목을 비활성화할 수도 있습니다. Disabled 재산.
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;
// required for registering IgniteUIBlazorusing IgniteUI.Blazor.Controls;
namespaceInfragistics.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 Infragistics Blazor
builder.Services.AddIgniteUIBlazor(typeof(IgbSelectModule));
builder.Services.AddIgniteUIBlazor(typeof(IgbIconModule));
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;
// required for registering IgniteUIBlazorusing IgniteUI.Blazor.Controls;
namespaceInfragistics.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 Infragistics Blazor
builder.Services.AddIgniteUIBlazor(typeof(IgbSelectModule));
await builder.Build().RunAsync();
}
}
}cs
Keep in mind that if a select group is disabled, you cannot enable separate items of it.
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;
// required for registering IgniteUIBlazorusing IgniteUI.Blazor.Controls;
namespaceInfragistics.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 Infragistics Blazor
builder.Services.AddIgniteUIBlazor(typeof(IgbSelectModule));
builder.Services.AddIgniteUIBlazor(typeof(IgbIconModule));
await builder.Build().RunAsync();
}
}
}cs
