Blazor ComboBox Features

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

Combobox Features Example

The following demo shows some IgbCombo features that are enabled/disabled at runtime:

In our sample we are going to use the IgbSwitch component, so we have to import them together with the combo:

// 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;
    }
}

Note that grouping is enabled/disabled by setting the GroupKey property to a corresponding data source field:

@code {
    private string Group = "";

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

특징

필터링

By default, filtering in the ComboBox is enabled. It can be disabled by setting the DisableFiltering property.

Filtering options can be further enhanced by enabling the search case sensitivity. The case-sensitive icon can be turned on using the CaseSensitiveIcon property so that end-users can control the case sensitivity.

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

필터링 옵션

The Ignite UI for Blazor IgbCombo exposes one more filtering property that allows passing configuration of both FilterKey and CaseSensitive options. The FilterKey indicates which data source field should be used for filtering the list of options. The CaseSensitive option indicates if the filtering should be case-sensitive or not.

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

Grouping

Defining a GroupKey option will group the items, according to the provided key:

<IgbCombo GroupKey="region" />

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

정렬 방향

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

<IgbCombo GroupSorting="desc" />

Label

The IgbCombo label can be set easily using the Label property:

<IgbCombo Label="Cities" />

Placeholder

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

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

Autofocus

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

<IgbCombo Autofocus="true" />

Search Input Focus

The ComboBox search input is focused by default. To disable this feature and move the focus to the list of options use the AutofocusList property as shown below:

<IgbCombo AutofocusList="true" />

Required

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

<IgbCombo Required="true" />

Disable ComboBox

You can disable the ComboBox using the Disabled property:

<IgbCombo Disabled="true" />