React Select (選択)

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

    React 選択の例

    EXAMPLE
    TSX
    CSS
    Edit in:

    このサンプルが気に入りましたか? 完全な Ignite UI for Reactツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

    使用方法

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

    npm install igniteui-react
cmd

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

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

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

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

    コンポーネントの使用を開始するには、選択する 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>
tsx

    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 プロパティを使用して、一部またはすべての項目を無効にすることもできます。

    EXAMPLE
    TSX
    CSS
    Edit in:

    Header (ヘッダー)

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

    EXAMPLE
    TSX
    CSS
    Edit in: 

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

    Group (グループ)

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

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

    EXAMPLE
    TSX
    CSS
    Edit in: 

    <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>
tsx
    Ignite UI for React | CTA Banner

    検証

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

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

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

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

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

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

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

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

    スタイル設定

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

    Select コンポーネント

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

    Select Item コンポーネント

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

    Select Group コンポーネント

    パーツ名 説明
    label 選択したグループ項目の上にコンテンツを描画するラベル ラッパー。 
    igc-select::part(base) {
  background: var(--ig-primary-50);
}

igc-select-item[active] {
  background: var(--ig-secondary-300);
}

igc-select::part(input) {
  background-color: var(--ig-primary-50);
}

igc-select::part(prefix),
igc-select::part(suffix) {
  color: var(--ig-secondary-500-contrast);
  background: var(--ig-secondary-500);
}
css

    EXAMPLE
    TSX
    CSS
    Edit in:

    API リファレンス

    その他のリソース