Web Components Select (選択)

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

    Web Components 選択の例

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

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

    使用方法

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

    npm install igniteui-webcomponents
cmd

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

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

defineComponents(IgcSelectComponent);
ts

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

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

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

    Select (選択)

    IgcSelectComponent コンポーネントは Form コンポーネント内で使用できるため、登録する 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 プロパティを使用して、一部またはすべての項目を無効にすることもできます。

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    Header (ヘッダー)

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in: 

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

    Group (グループ)

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

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in: 

    <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>
html
    Ignite UI for Web Components | CTA Banner

    検証

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

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

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

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

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

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

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

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

    スタイル設定

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

    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
    TS
    HTML
    index.css
    SelectStyling.css
    Edit in:

    API リファレンス

    その他のリソース