Blazor Select (選択)

選択コンポーネントは、ドロップダウンに配置された項目のリストからの単一選択できます。このフォーム コントロールは、1 つまたは複数の文字の一致に基づく選択を含む、項目リストの迅速なナビゲーションを提供します。

Blazor 選択の例

使用方法

Select コンポーネントを使用する前に、追加のコンポーネントとともに登録する必要があります:

// in Program.cs file

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

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

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

コンポーネントの使用を開始するには、選択する IgbSelectItem のリストとともに IgbSelect を追加します。

<IgbSelect>
    <IgbSelectItem Value="orange">Orange</IgbSelectItem>
    <IgbSelectItem Value="apple">Apple</IgbSelectItem>
    <IgbSelectItem Value="banana">Banana</IgbSelectItem>
    <IgbSelectItem Value="mango">Mango</IgbSelectItem>
</IgbSelect>

Select (選択)

IgbSelect コンポーネントは Form コンポーネント内で使用できるため、登録する Name プロパティを公開します。また、Label および Placeholder プロパティもあります。Outlined プロパティは、Material テーマに関してのみ、スタイリング目的で使用されます。デフォルトのスロットを除いて、コンポーネントは、header、footer、helper-text、prefix、suffix、および toggle-icon を含む他のいくつかのスロットを提供します。コンポーネントのサイズは、--ig-size CSS 変数を使用して変更できます。

Item (項目)

IgbSelectItem コンポーネントを使用すると、ユーザーは IgbSelect コントロールで使用されるオプションのリストを宣言的に指定できます。各項目は、選択時に保持されるデータを表す Value プロパティを提供します。IgbSelectItem には、項目のテキスト コンテンツを指定できるデフォルトのスロットがあります。このテキスト コンテンツは、Value プロパティが IgbSelectItem に存在しない場合に値として使用されます。prefix スロットと suffix スロットを使用して、IgbSelectItem コンテンツの前後に描画されるカスタム コンテンツを提供することもできます。Selected プロパティを設定することにより、選択した項目を事前定義できます。Disabled プロパティを使用して、一部またはすべての項目を無効にすることもできます。

Header (ヘッダー)

IgbSelectHeader を使用して、項目のグループのヘッダーを提供できます。

<IgbSelect>
    <IgbSelectHeader>Tasks</IgbSelectHeader>
</IgbSelect>

Group (グループ)

複数の IgbSelectItem を IgbSelectGroup コンポーネントの開く括弧と閉じる括弧の間に配置して、ユーザーがそれらを視覚的にグループ化できるようにすることができます。IgbSelectGroup は、その label スロットを介してラベルを付け、その Disabled プロパティを介して無効にすることができます。

<IgbSelect>
    <IgbSelectGroup>
        <span slot="label">Europe</span>

        <IgbSelectItem>
          <IgbIcon @ref="IconRef" slot="prefix" name="place" collection="material"></IgbIcon>
          Germany
          <span slot="suffix">DE</span>
        </IgbSelectItem>

        <IgbSelectItem>
          <IgbIcon slot="prefix" name="place" collection="material"></IgbIcon>
          France
          <span slot="suffix">FR</span>
        </IgbSelectItem>

        <IgbSelectItem>
          <IgbIcon slot="prefix" name="place" collection="material"></IgbIcon>
          Spain
          <span slot="suffix">ES</span>
        </IgbSelectItem>
    </IgbSelectGroup>
</IgbSelect>

検証

さらに、IgbSelect は、Required、Disabled、Autofocus など、ほとんどの IgbInput プロパティをサポートします。コンポーネントは、その検証にバインドされたメソッドも公開します。

• reportValidity - 有効性をチェックし、無効な場合はコンポーネントにフォーカスします。

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

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

• ALT + ↑ ↓ の組み合わせを使用するか、SPACE または ENTER キーをクリックして、Select を開きます。
• ALT + ↑ または ↓ の組み合わせ、または ENTER、SPACE、ESC、IgbTab キーのいずれかを使用して、Select を閉じます。
• ← → キーを使用すると、リスト内の前の項目が選択されます。
• ↑ ↓ キーを使用すると、リスト内の次の項目が選択されます。
• HOME キーまたは END キーを使用すると、リストの最初または最後の項目が選択されます。
• 文字を入力すると、項目のリストが照会され、現在のユーザー入力に最も近いものが選択されます。

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

• ENTER キーまたは SPACE キーを使用すると、項目が選択され、リストが閉じます。
• ← → キーを使用すると、リスト内の前の項目がアクティブになります。
• ↑ ↓ キーを使用すると、リスト内の次の項目がアクティブになります。
• HOME キーまたは END キーを使用すると、リストの最初または最後の項目がアクティブになります。

API リファレンス

その他のリソース

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