Blazor コンボボックスの機能

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

コンボボックス機能の例

以下のデモは、ランタイムで有効または無効にできるいくつかの 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" />

次に、React の useState フックを使用して、スイッチの状態変化に応じて更新される変数を定義します。これにより、状態が追跡され、コンボボックスの入力に反映されます。

<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 IgbCombo は、FilterKey オプションと CaseSensitive オプションの両方の構成を渡すことができるフィルター プロパティをもう 1 つ公開しています。FilterKey は、オプションのリストをフィルタリングするためにどのデータ ソース フィールドを使用する必要があるかを示します。CaseSensitive オプションは、フィルタリングで大文字と小文字を区別するかどうかを示します。

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

グループ化

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

<IgbCombo GroupKey="region" />

ソートの方向

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

<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" />

API リファレンス

その他のリソース

• Ignite UI for Blazor フォーラム (英語)
• Ignite UI for Blazor GitHub (英語)