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

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

<IgbCombo T="object" 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",
        },
    };
}

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

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

• T - *必須。ValueKey が省略されている場合は、これを 「object」 に設定する必要があります。それ以外の場合は、ValueKey のプロパティ タイプと一致する必要があります。
• ValueKey - オプション、複雑なデータ オブジェクトに必須 - データ ソースのどのフィールドを選択に使用するかを決定します。ValueKey が省略された場合、選択 API はオブジェクト参照を使用して項目を選択します。
• DisplayKey - オプション、複雑なデータ オブジェクトに推奨 - データ ソース内のどのフィールドが表示値として使用されるかを決定します。 DisplayKey に値が指定されていない場合、コンボは指定された ValueKey (存在する場合) を使用します。 この例では、コンボで各都市の name を表示し、項目の選択と各項目の基礎となる値として id フィールドを使用するようにします。したがって、これらのプロパティをコンボの 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 キーを使用すると、オプションのリストが閉じます。

スタイル設定

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

CSS パーツを使用すると、コンボのスタイルを完全に制御できます。

igc-combo::part(search-input) {
  background-color: var(--ig-gray-100);
  border-radius: 2px;
}

igc-combo::part(input) {
  background-color: var(--ig-gray-100);
}

igc-combo::part(prefix) {
  background-color: var(--ig-secondary-50);
  color: var(--ig-primary-500);
}

igc-combo::part(toggle-icon) {
  color: var(--ig-primary-500);
}

API リファレンス

その他のリソース

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