Blazor 단일 선택 콤보 상자

Blazor ComboBox 단일 선택 모드와 메인 입력 프롬프트를 통한 항목 목록의 빠른 필터링을 지원합니다. 사용자는 찾고 있는 항목을 빠르게 입력하고 옵션 목록이 표시됩니다. Enter 키를 누르면 강조 표시된 첫 번째 일치 항목이 선택됩니다.

Blazor Single Selection Example

단일 선택 및 빠른 필터링을 활성화하려면 SingleSelect의 재산 ComboBox 요소. 사용자 경험과 키보드 탐색은 대부분 동일하게 유지되지만 옵션 목록 위의 특수 필터링 상자에 검색어를 입력하는 대신 기본 입력 상자가 사용됩니다.

<IgbCombo SingleSelect></IgbCombo>
razor

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 IgniteUIBlazor
using IgniteUI.Blazor.Controls;

namespace Infragistics.Samples
{
    public class Program
    {
        public static async 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(IgbComboModule));
            builder.Services.AddIgniteUIBlazor(typeof(IgbSwitchModule));

            await builder.Build().RunAsync();
        }
    }
}cs

using System;
using System.Collections;
using System.Collections.Generic;

namespace Infragistics.Samples
{
    public class City {
        public string Id { get; set; }
        public string Name { get; set; }
        public string Country { get; set; }
    }

    public class SampleData {
        public static List<City> Cities = GetCities();

        public static List<City> GetCities() {
            var data = new List<City> {
                new City {
                    Id = "UK01",
                    Name = "London",
                    Country = "United Kingdom",
                },
                new City {
                    Id = "UK02",
                    Name = "Manchester",
                    Country = "United Kingdom",
                },
                new City {
                    Id = "UK03",
                    Name = "Birmingham",
                    Country = "United Kingdom",
                },
                new City {
                    Id = "UK04",
                    Name = "Glasgow",
                    Country = "United Kingdom",
                },
                new City {
                    Id = "UK05",
                    Name = "Liverpool",
                    Country = "United Kingdom",
                },
                new City {
                    Id = "US01",
                    Name = "New York",
                    Country = "United States of America",
                },
                new City {
                    Id = "US02",
                    Name = "Miami",
                    Country = "United States of America",
                },
                new City {
                    Id = "US03",
                    Name = "Philadelphia",
                    Country = "United States of America",
                },
                new City {
                    Id = "US04",
                    Name = "Chicago",
                    Country = "United States of America",
                },
                new City {
                    Id = "US05",
                    Name = "Springfield",
                    Country = "United States of America",
                },
                new City {
                    Id = "US06",
                    Name = "Los Angeles",
                    Country = "United States of America",
                },
                new City {
                    Id = "US07",
                    Name = "Houston",
                    Country = "United States of America",
                },
                new City {
                    Id = "US08",
                    Name = "Phoenix",
                    Country = "United States of America",
                },
                new City {
                    Id = "US09",
                    Name = "San Diego",
                    Country = "United States of America",
                },
                new City {
                    Id = "US10",
                    Name = "Dallas",
                    Country = "United States of America",
                },
                new City {
                    Id = "BG01",
                    Name = "Sofia",
                    Country = "Bulgaria",
                },
                new City {
                    Id = "BG02",
                    Name = "Plovdiv",
                    Country = "Bulgaria",
                },
                new City {
                    Id = "BG03",
                    Name = "Varna",
                    Country = "Bulgaria",
                },
                new City {
                    Id = "BG04",
                    Name = "Burgas",
                    Country = "Bulgaria",
                },
                new City {
                    Id = "IT01",
                    Name = "Rome",
                    Country = "Italy",
                },
                new City {
                    Id = "IT02",
                    Name = "Milan",
                    Country = "Italy",
                },
                new City {
                    Id = "IT03",
                    Name = "Naples",
                    Country = "Italy",
                },
                new City {
                    Id = "IT04",
                    Name = "Turin",
                    Country = "Italy",
                },
                new City {
                    Id = "IT05",
                    Name = "Palermo",
                    Country = "Italy",
                },
                new City {
                    Id = "IT06",
                    Name = "Florence",
                    Country = "Italy",
                },
            };

            return data;
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container sample center">
    <style>
        .options {
            display: flex;
            flex-direction: column;
            margin-top: 12px;
            gap: 8px;
        }
    </style>

    <IgbCombo
        T="string"
        Label="Cities"
        Placeholder="Pick a city"
        Data="Data"
        ValueKey="Id"
        DisplayKey="Name"
        GroupKey="@Group"
        Disabled="@Disabled"
        SingleSelect>
    </IgbCombo>

    <div class="options">
        <IgbSwitch Change="@OnGroupClick">Enable Grouping</IgbSwitch>
        <IgbSwitch Change="@OnDisableClick">Disable Combo</IgbSwitch>
    </div>
</div>

@code {
    private List<City> Data;
    private string Group = "";
    private bool Disabled = false;

    protected override void OnInitialized() {
        this.Data = SampleData.Cities;
    }

    public void OnGroupClick(IgbCheckboxChangeEventArgs e) {
        IgbSwitch sw = e.Parent as IgbSwitch;
        this.Group = sw.Checked ? "Country" : "";
    }

    public void OnDisableClick(IgbCheckboxChangeEventArgs e) {
        IgbSwitch sw = e.Parent as IgbSwitch;
        this.Disabled = sw.Checked;
    }
}razor

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
css

Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.

Selection API

SingleSelect 속성이 적용된 ComboBox의 선택 API는 대부분 동일하게 유지되지만 이 속성이 설정되지 않은 ComboBox와 비교할 때 몇 가지 중요한 차이점이 있습니다.

가장 큰 차이점은 언제든지 하나의 항목만 선택할 수 있다는 것입니다. 예를 들어 콤보 구성 요소에 대해 ValueKey 지정한 경우 둘 이상의 항목을 Select / Deselect 메서드에 전달해도 아무런 효과가 없습니다. 이는 또한 이전에 선택한 항목이 새로 선택되면 자동으로 선택 취소된다는 의미입니다.

단일 선택 콤보에서 프로그래밍 방식으로 항목을 선택/선택 취소하는 방법은 다음과 같습니다.

항목 선택:

<IgbCombo SingleSelect @ref="Combo"></IgbCombo>

@code {
    private IgbCombo Combo;

    this.Combo.Select(new object[] { "UK01" });
}
razor

새로 선택하지 않고 항목을 선택 취소하려면 deselect 메서드를 호출하세요.

항목 선택 취소:

<IgbCombo SingleSelect @ref="Combo"></IgbCombo>

@code {
    private IgbCombo Combo;

    this.Combo.Deselect(new object[] { "UK01" });
}
razor

Disabled features

당연히 일부 구성 옵션은 단일 선택 ComboBox에 영향을 주지 않습니다.

Placeholder

일반적으로 옵션 목록 위에 배치되는 필터링 입력은 단일 선택 ComboBox에 존재하지 않으므로 PlaceholderSearch 속성에 값을 할당하면 결과가 생성되지 않습니다.

Autofocusing the list of options

단일 선택 ComboBox에 AutofocusList 옵션을 설정해도 아무런 효과가 없습니다.

키보드 탐색은 단일 선택이 아닌 ComboBox와 동일하게 작동해야 합니다. 단, 이제 기본 입력이 필터링 프롬프트 역할을 하므로 필터링/검색 입력에 적용되는 모든 키보드 동작이 기본 입력으로 이동됩니다. 입력 프롬프트.

Other Features

다른 모든 기능은 단일 선택이 아닌 ComboBox 구성 요소와 동일하게 작동합니다.

API Reference

IgbCombo