React Select (選択)

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

React 選択の例

使用方法

まず、次のコマンドを実行して、対応する Ignite UI for React npm パッケージをインストールする必要があります:

npm install igniteui-react

次に、以下のように、IgrSelect および IgrSelectItem とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:

import { IgrSelectModule, IgrSelect, IgrSelectItemModule, IgrSelectItem } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrSelectModule.register();
IgrSelectItemModule.register();

[!Note] ヘッダーとグループの選択コンポーネントは、使用しない限り必須ではないことに注意してください。

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

<IgrSelect>
  <IgrSelectItem value="Orange"><span>Orange</span></IgrSelectItem>
  <IgrSelectItem value="Apple"><span>Apple</span></IgrSelectItem>
  <IgrSelectItem value="Banana"><span>Banana</span></IgrSelectItem>
  <IgrSelectItem value="Mango"><span>Mango</span></IgrSelectItem>
</IgrSelect>

Select (選択)

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

Item (項目)

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

Header (ヘッダー)

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

<IgrSelect>
  <IgrSelectHeader>
    <span>Tasks</span>
  </IgrSelectHeader>
</IgrSelect>

Group (グループ)

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

[!Note] 選択グループが無効になっている場合、そのグループの個別の項目を有効にすることはできないことに注意してください。

<IgrSelect>
  <IgrSelectGroup>
    <span slot="label">Europe</span>

    <IgrSelectItem>
      <span slot="prefix">
        <IgrIcon name="place" ref={iconPlace} collection="material"></IgrIcon>
      </span>
      <span> Germany </span>
      <span slot="suffix">DE</span>
    </IgrSelectItem>

    <IgrSelectItem>
      <span slot="prefix">
        <IgrIcon name="place" ref={iconPlace} collection="material"></IgrIcon>
      </span>
      <span> France </span>
      <span slot="suffix">FR</span>
    </IgrSelectItem>

    <IgrSelectItem>
      <span slot="prefix">
        <IgrIcon name="place" ref={iconPlace} collection="material"></IgrIcon>
      </span>
      <span> Spain </span>
      <span slot="suffix">ES</span>
    </IgrSelectItem>
  </IgrSelectGroup>
</IgrSelect>

検証

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

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

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

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

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

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

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

[!Note] IgrSelect コンポーネントは、項目の単一選択のみをサポートします。

スタイル設定

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

CSS パーツ

Select コンポーネント

部分名	説明
input	カプセル化された igc-input。
label	カプセル化されたテキスト ラベル。
list	オプションのリストを保持するラッパー。
prefix	入力の前にコンテンツを描画するプレフィックス ラッパー。
suffix	入力後にコンテンツを描画するサフィックス ラッパー。
toggle-icon	サフィックス ラッパー内のコンテンツを描画するトグル アイコン ラッパー。
helper-text	入力の下にコンテンツを描画するヘルパー テキスト ラッパー。

Select Item コンポーネント

部分名	説明
content	項目のテキスト コンテンツを保持するメイン ラッパー。
prefix	メイン ラッパーの前にコンテンツを描画するプレフィックス ラッパー。
suffix	メイン ラッパーの後にコンテンツを描画するサフィックス ラッパー。

Select Group コンポーネント

部分名	説明
label	選択したグループ項目の上にコンテンツを描画するラベル ラッパー。

API リファレンス

• IgrSelect
• IgrSelectItem
• IgrSelectHeader
• IgrSelectGroup

その他のリソース

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