Blazor ComboBox Features

    Ignite UI for Blazor 필터링 및 그룹화와 같은 여러 기능을 제공합니다.

    Combobox Features Example

    다음 데모는 런타임에 활성화/비활성화되는 기능IgbCombo 들을 보여줍니다:

    샘플에서는 컴포넌트를IgbSwitch 사용할 예정이므로, 다음 콤보와 함께 임포트해야 합니다:

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbComboModule));
builder.Services.AddIgniteUIBlazor(typeof(IgbSwitchModule));

    스타일링을 컴포넌트에 적용하려면 추가 CSS 파일을 연결해야 합니다IgbSwitch. 다음 내용은 Blazor Web Assembly 프로젝트의 wwwroot/index.html 파일 또는 Blazor Server 프로젝트의 Pages/_Host.cshtml 파일에 포함되어야 합니다:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

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

<IgbSwitch Change="@OnDisableFilteringClick">Disable Filtering</IgbSwitch>
<IgbSwitch Change="@OnCaseSensitiveClick" Disabled="@DisableFiltering">Show Case-sensitive Icon</IgbSwitch>
<IgbSwitch Change="@OnGroupClick">Enable Grouping</IgbSwitch>
<IgbSwitch Change="@OnDisableClick">Disable Combo</IgbSwitch>

@code {
    private bool DisableFiltering = false;
    private bool CaseSensitiveIcon = false;
    private bool Disabled = false;

    public void OnDisableFilteringClick(IgbComponentBoolValueChangedEventArgs e) {
        IgbSwitch sw = e.Parent as IgbSwitch;
        this.DisableFiltering = sw.Checked;
    }

    public void OnCaseSensitiveClick(IgbComponentBoolValueChangedEventArgs e) {
        IgbSwitch sw = e.Parent as IgbSwitch;
        this.CaseSensitiveIcon = sw.Checked;
    }

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

    그룹화는 해당 데이터 소스 필드에 속성을 설정GroupKey 하여 활성화/비활성화할 수 있음을 참고하세요:

    @code {
    private string Group = "";

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

    특징

    필터링

    기본적으로 ComboBox의 필터링이 활성화되어 있습니다. 속성을 설정DisableFiltering 하면 비활성화할 수 있습니다.

    필터링 옵션은 검색 케이스 민감도를 활성화하여 더욱 강화할 수 있습니다. 이 속성을 통해CaseSensitiveIcon 대소문자 구분 아이콘을 켤 수 있어 최종 사용자가 대소문자 민감도를 제어할 수 있습니다.

    <IgbCombo DisableFiltering="true" CaseSensitiveIcon="true" />

    필터링 옵션

    Ignite UI for BlazorIgbCombo은 두FilterKey 옵션 모두CaseSensitive를 전달할 수 있는 또 다른 필터링 속성을 제공합니다. 는FilterKey 옵션 목록을 필터링할 때 어떤 데이터 소스 필드를 사용해야 하는지를 나타냅니다.CaseSensitive이 옵션은 필터링이 대소문자 구분인지 여부를 나타냅니다.

    다음 코드 조각은 이름 대신 국가별로 데이터 소스의 도시를 필터링하는 방법을 보여줍니다. 또한 기본적으로 필터링에서 대소문자를 구분하도록 설정하고 있습니다.

    Grouping

    옵션을 정의하면GroupKey 제공된 키에 따라 항목들을 그룹화합니다:

    <IgbCombo GroupKey="region" />

    [!Note] The GroupKey property will only have effect if your data source consists of complex objects.

    정렬 방향

    ComboBox 구성 요소는 그룹을 오름차순으로 정렬해야 하는지 내림차순으로 정렬해야 하는지 설정하는 옵션도 제공합니다. 기본적으로 정렬 순서는 오름차순입니다.

    <IgbCombo GroupSorting="desc" />

    Label

    라벨은IgbCombo 다음과Label 같은 속성을 사용하여 쉽게 설정할 수 있습니다:

    <IgbCombo Label="Cities" />

    Placeholder

    ComboBox 구성 요소 입력과 드롭다운 메뉴 내에 있는 검색 입력 모두에 대해 자리 표시자 텍스트를 지정할 수 있습니다.

    <IgbCombo Placeholder="Pick a city" PlaceholderSearch="Search for a city" />

    Autofocus

    페이지 로드 시 ComboBox에 자동으로 초점을 맞추려면 다음 코드를 사용할 수 있습니다.

    <IgbCombo Autofocus="true" />

    Search Input Focus

    ComboBox 검색 입력은 기본적으로 집중되어 있습니다. 이 기능을 비활성화하고 포커스를 옵션 목록으로 이동하려면 아래에 표시된 속성을 사용AutofocusList 하세요:

    <IgbCombo AutofocusList="true" />

    Required

    필수 속성을 설정하여 ComboBox를 필수로 표시할 수 있습니다.

    <IgbCombo Required="true" />

    Disable ComboBox

    ComboBox는 다음 속성으로Disabled 비활성화할 수 있습니다:

    <IgbCombo Disabled="true" />

    Additional Resources