Web Components Select (選択)

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

Web Components 選択の例

使用方法

まず、次のコマンドを実行して Ignite UI for Web Components をインストールする必要があります:

npm install igniteui-webcomponents

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

import {
    defineComponents,
    IgcSelectComponent
}
from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcSelectComponent);

Ignite UI for Web Components の完全な概要については、作業の開始トピックを参照してください。

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

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

<igc-select>
    <igc-select-item value="orange">Orange</igc-select-item>
    <igc-select-item value="apple">Apple</igc-select-item>
    <igc-select-item value="banana">Banana</igc-select-item>
    <igc-select-item value="mango">Mango</igc-select-item>
</igc-select>

Select (選択)

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

Item (項目)

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

Header (ヘッダー)

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

<igc-select>
    <igc-select-header>Tasks</igc-select-header>
</igc-select>

Group (グループ)

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

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

<igc-select>
    <igc-select-group>
        <span slot="label">Europe</span>

        <igc-select-item>
          <igc-icon @ref="IconRef" slot="prefix" name="place" collection="material"></igc-icon>
          Germany
          <span slot="suffix">DE</span>
        </igc-select-item>

        <igc-select-item>
          <igc-icon slot="prefix" name="place" collection="material"></igc-icon>
          France
          <span slot="suffix">FR</span>
        </igc-select-item>

        <igc-select-item>
          <igc-icon slot="prefix" name="place" collection="material"></igc-icon>
          Spain
          <span slot="suffix">ES</span>
        </igc-select-item>
    </igc-select-group>
</igc-select>

検証

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

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

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

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

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

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

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

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

スタイル設定

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

CSS パーツ

Select コンポーネント

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

Select Item コンポーネント

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

Select Group コンポーネント

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

API リファレンス

• IgcSelectComponent
• IgcSelectItemComponent
• IgcSelectHeaderComponent
• IgcSelectGroupComponent

その他のリソース

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