Blazor コンボボックスの概要

Blazor コンボボックスは、ユーザーが提供されたリストでさまざまな定義済みオプションを簡単に選択、フィルタリング、およびグループ化できるようにする軽量のエディターです。このコンポーネントは、Blazor コンボボックスキーボードナビゲーションのオプション、項目、ヘッダー、およびフッターの表示方法をカスタマイズするためのテンプレートもサポートしています。

Ignite UI for Blazor コンボボックスコンポーネントは、ユーザーが選択できるオプションのリストを提供します。仮想化された項目のリストにすべてのオプションが表示されます。つまり、コンボボックスは、1 つ以上のオプションを選択できる数千のレコードを同時に表示できます。さらに、このコンポーネントには、大文字と小文字を区別するフィルタリング、グループ化、複雑なデータバインディングなどの機能があります。

Blazor コンボボックスの例

Blazor コンボボックスコンポーネントを使用した作業の開始

IgbCombo コンポーネントの使用を開始するには、最初にそのモジュールを登録する必要があります。

// in Program.cs file

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

スタイルを IgbCombo コンポーネントに適用するには、追加の CSS ファイルをリンクする必要もあります。以下は、Blazor Web Assembly プロジェクトの wwwroot/index.html ファイルまたは Blazor Server プロジェクトの Pages/_Host.cshtml ファイルに配置する必要があります。

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

[!WARNING] IgbCombo コンポーネントは標準の <form> 要素では機能しません。代わりに IgbForm を使用してください。

次に、オプションのリストを構築するコンボデータソースに、オブジェクトの配列をバインドします。

<IgbCombo Id="basic-combo" DisplayKey="name" ValueKey="id" Data="Data" />

@code {
    private class City {
        public string Id { get; set; }
        public string Name { get; set; }
        public string Country { get; set; }
    }

    private List<City> Data = new List<City> {
        new City {
            Id = "UK01",
            Name = "London",
            Country = "United Kingdom",
        },
        new City {
            Id = "BG01",
            Name = "Sofia",
            Country = "Bulgaria",
        },
        new City {
            Id = "US01",
            Name = "New York",
            Country = "United States",
        },
    };
}

データ値と表示プロパティ

コンボは複雑なデータ (オブジェクト) の配列にバインドされている場合、コントロールが項目の選択を処理するために使用するプロパティを指定する必要があります。コンポーネントは以下のプロパティを公開します:

ValueKey - オプション、複雑なデータオブジェクトに必須 - データソースのどのフィールドを選択に使用するかを決定します。ValueKey が省略された場合、選択 API はオブジェクト参照を使用して項目を選択します。
DisplayKey - オプション、複雑なデータオブジェクトに推奨 - データソース内のどのフィールドが表示値として使用されるかを決定します。 DisplayKey に値が指定されていない場合、コンボは指定された ValueKey (存在する場合) を使用します。この例では、コンボで各都市の name を表示し、項目の選択と各項目の基礎となる値として id フィールドを使用するようにします。したがって、これらのプロパティをコンボの ValueKey と DisplayKey にそれぞれ提供します。

[!Note] データソースがプリミティブ型 (例: strings、numbers など) で構成されている場合、ValueKey や DisplayKey を指定しないでください。

値の設定

ComboBox コンポーネントは、属性 (値とも呼ばれます) に加えて、Value ゲッターとセッターを公開します。value 属性を使用して、コンポーネントの初期化時に選択した項目を設定できます。

値 (現在選択されている項目のリスト) を読み取る場合、または値を更新する場合は、それぞれ値ゲッターとセッターを使用します。値ゲッターは、ValueKey で表される選択されたすべての項目のリストを返します。同様に、値セッターを使用して選択した項目のリストを更新する場合は、ValueKey によって項目のリストを提供する必要があります。

例:

選択 API

コンボコンポーネントは、現在選択されている項目を変更できる API を公開します。

ユーザーの操作によってオプションのリストから項目を選択する以外に、プログラムで項目を選択することもできます。これは、select および deselect メソッドを介して行われます。項目の配列をこれらのメソッドに渡すことができます。メソッドが引数なしで呼び出された場合、呼び出されたメソッドに応じて、すべての項目が選択 / 選択解除されます。コンボコンポーネントに ValueKey を指定した場合は、選択 / 選択解除する項目の値キーを渡す必要があります。

一部の項目を選択 / 選択解除:

<IgbCombo
    @ref="Combo"
    Label="Cities"
    Placeholder="Pick a city"
    Data="Data"
    ValueKey="Id"
    DisplayKey="Name">
</IgbCombo>

@code {
    private List<City> Data;
    private IgbCombo Combo;
    private object[] Cities;

    protected override void OnInitialized() {
        this.Data = SampleData.Cities;
        this.Cities = new object[] { "UK01", "UK02", "UK03", "UK04", "UK05" };
    }

    public void SelectCities() {
        this.Combo.Select(Cities);
    }

    public void DeselectCities() {
        this.Combo.Deselect(Cities);
    }
}

すべての項目を選択 / 選択解除:

@code {
    public void SelectAll() {
        this.Combo.Select(new object[] {});
    }

    public void DeselectAll() {
        this.Combo.Deselect(new object[] {});
    }
}

ValueKey プロパティを省略した場合は、オブジェクト参照として選択 / 選択解除する項目を列挙する必要があります。

検証

Ignite UI for Blazor Combo コンポーネントは、Required、Disabled、Autofocus、Invalid など、ほとんどの IgbInput プロパティをサポートしています。このコンポーネントは、その検証にバインドされた 2 つのメソッドも公開しています。

reportValidity - 有効性をチェックし、コンポーネントが検証の制約を満たしている場合は true を返します。
checkValidity - ネイティブ入力 API に準拠するための reportValidity のラッパー。

キーボードナビゲーション

コンボコンポーネントがフォーカスされていて、オプションのリストが表示されていない場合:

↓ / Alt + ↓ キーを使用してオプションのリストを開きます。

コンボコンポーネントがフォーカスされ、オプションのリストが表示されている場合:

↓ キーを使用すると、リスト内の次の項目がアクティブになります。
↑ キーを使用すると、リスト内の前の項目がアクティブになります。最初の項目がすでにアクティブな場合、入力にフォーカスします。
Home または End キーを使用すると、リストの最初または最後の項目がアクティブになります。
Space キーを使用すると、アクティブな項目が選択されます。
Enter キーを使用すると、アクティブな項目が選択され、オプションのリストが閉じます。
Esc または Tab/Shift + Tab キーを使用すると、オプションのリストが閉じます。

コンボのスタイル設定

Ignite UI for Blazor IgbCombo コンポーネントとその項目の外観は、以下に示す公開 CSS パーツを使用して変更できます。

CSS パーツ

パーツ名	説明
`label`	カプセル化されたテキストラベル。
`input`	メイン入力フィールド。
`native-input`	メイン入力フィールドのネイティブ入力。
`prefix`	プレフィックスラッパー。
`suffix`	サフィックスラッパー。
`toggle-icon`	トグルアイコンラッパー。
`clear-icon`	クリアアイコンラッパー。
`case-icon`	フィルター入力のサフィックス内のコンテンツを描画するケースアイコンラッパー。
`helper-text`	ヘルパーテキストラッパー。
`search-input`	検索入力フィールド。
`list-wrapper`	オプションラッパーのリスト。
`list`	オプションボックスのリスト。
`item`	オプションのリスト内の各項目を表します。
`group-header`	オプションのリストの各ヘッダーを表します。
`active`	項目がアクティブな場合に、項目パーツリストに追加されます。
`selected`	項目が選択されている場合に、項目パーツリストに追加されます。
`checkbox`	各リスト項目の各チェックボックスを表します。
`checkbox-indicator`	各リスト項目のチェックボックスインジケーターを表します。
`checked`	チェックボックスがチェックされている場合に、チェックボックスパーツリストに追加されます。
`header`	ヘッダーコンテンツを保持するコンテナー。
`footer`	フッターコンテンツを保持するコンテナー。
`empty`	空のコンテンツを保持するコンテナ。

API リファレンス

IgbCombo