Web Components Select (選択)

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

Web Components 選択の例

使用方法

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

npm install igniteui-webcomponents

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

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

defineComponents(IgcSelectComponent);

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

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

<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 (選択)

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

Item (項目)

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

Header (ヘッダー)

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

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

Group (グループ)

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

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

検証

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

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

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

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

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

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

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

スタイル設定

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

Select コンポーネント

Select Item コンポーネント

Select Group コンポーネント

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);
}

API リファレンス

その他のリソース

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