Blazor コンボボックスの機能

Ignite UI for Blazor コンボボックスコンポーネントは、フィルタリングやグループ化などのいくつかの機能を公開しています。

コンボボックス機能の例

以下のデモは、ランタイムで有効または無効にできるいくつかの ComboBox 機能を示しています。

このサンプルでは、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" : "";
    }
}

機能

フィルタリング

コンボボックスのフィルタリングがデフォルトで有効になります。無効にするには、DisableFiltering プロパティを設定します。

フィルタリングオプションは、検索の大文字と小文字の区別を有効にすることでさらに拡張できます。CaseSensitiveIcon プロパティを使用して大文字と小文字を区別するアイコンをオンにすると、エンドユーザーは大文字と小文字の区別を制御できます。

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

フィルタリングオプション

Ignite UI for Blazor ComboBox コンポーネントは、FilterKey オプションと CaseSensitive オプションの両方の構成を渡すことができるフィルタープロパティをもう 1 つ公開しています。FilterKey は、オプションのリストをフィルタリングするためにどのデータソースフィールドを使用する必要があるかを示します。CaseSensitive オプションは、フィルタリングで大文字と小文字を区別するかどうかを示します。

次のコードスニペットは、名前ではなく国でデータソースから都市をフィルター処理する方法を示しています。また、デフォルトで大文字と小文字を区別するフィルタリングを行います。

グループ化

GroupKey オプションを定義すると、キーに基づいて項目をグループ化します。

<IgbCombo GroupKey="region" />

[!Note] GroupKey プロパティは、データソースが複雑なオブジェクトで構成されている場合にのみ有効です。

ソートの方向

コンボボックスコンポーネントは、グループを昇順または降順でソートするかどうかを設定するオプションも公開します。デフォルトでは、ソート順序は、昇順に設定されています。

<IgbCombo GroupSorting="desc" />

ラベル

IgbCombo ラベルは、Label プロパティを使用して簡単に設定できます。

<IgbCombo Label="Cities" />

プレースホルダー

コンボボックスコンポーネント入力とドロップダウンメニュー内に配置された検索入力の両方に、プレースホルダーテキストを指定できます。

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

オートフォーカス

コンボボックスをページの読み込みに自動的にフォーカスさせたい場合は、次のコードを使用できます。

<IgbCombo Autofocus="true" />

検索入力のフォーカス

コンボボックスの検索入力はデフォルトでフォーカスされています。この機能を無効にしてフォーカスをオプションのリストに移動するには、以下に示すように AutofocusList プロパティを使用します。

<IgbCombo AutofocusList="true" />

必須

required プロパティを設定することで、コンボボックスを必須としてマークできます。

<IgbCombo Required="true" />

コンボボックスを無効にする

Disabled プロパティを使用してコンボボックスを無効にできます。

<IgbCombo Disabled="true" />