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

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

    コンポーネントの使用を開始するには、選択する igc-select-item のリストとともに igc-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 (選択)

    igc-select コンポーネントは igc-form 内で使用できるため、登録する name プロパティを公開します。また、labelplaceholder、および size プロパティもあります。outlined プロパティは、Material テーマに関してのみ、スタイリング目的で使用されます。デフォルトのスロットを除いて、コンポーネントは、headerfooterhelper-textprefixsuffix、および toggle-icon を含む他のいくつかのスロットを提供します。

    Item (項目)

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

    Header (ヘッダー)

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

    Group (グループ)

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

    Note

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

    検証

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

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

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

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

    • ALT + 上 / 下矢印 の組み合わせを使用するか、Space または Enter キーをクリックして、igc-select を開きます。
    • ALT + 上矢印 / 下矢印 の組み合わせ、または EnterSpaceEscIgcTabComponent キーのいずれかを使用して、igc-select を閉じます。
    • 上 / 左矢印キーを使用すると、リスト内の前の項目が選択されます。
    • 下 / 右矢印キーを使用すると、リスト内の次の項目が選択されます。
    • Home キーまたは End キーを使用すると、リストの最初または最後の項目が選択されます。
    • 文字を入力すると、項目のリストが照会され、現在のユーザー入力に最も近いものが選択されます。

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

    • Enter キーまたは Space キーを使用すると、項目が選択され、リストが閉じます。
    • 上 / 左矢印キーを使用すると、リスト内の前の項目がアクティブになります。
    • 下 / 右矢印キーを使用すると、リスト内の次の項目がアクティブになります。
    • Home キーまたは End キーを使用すると、リストの最初または最後の項目がアクティブになります。
    Note

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

    スタイル設定

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

    CSS パーツ

    Select コンポーネント

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

    Select Item コンポーネント

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

    Select Group コンポーネント

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

    API リファレンス

    その他のリソース