Select

Select コンポーネントは、ドロップダウンに配置された項目のリストからの単一選択できます。このマテリアルベースのフォームコントロールは、単一または複数の文字の一致に基づいて、選択などの迅速な項目リスト ナビゲーションを提供します。IgxSelectComponentIgxDropDownComponent を拡張するため、Select インスタンスですべての Drop Down イベントを処理できます。

Angular Select の例

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

使用方法

Select コンポーネントを初期化にするには、まず IgxSelectModuleapp.module ファイルにインポートします。

// app.module.ts

...
import { IgxSelectModule } from 'igniteui-angular';

@NgModule({
    ...
    imports: [..., IgxSelectModule],
    ...
})
export class AppModule {}

次に選択する項目のリストと共に igx-select を追加します。igx-select-item を使用して、igx-select に含まれる項目を表示します。

<igx-select>
    <label igxLabel>Simple Select</label>
    <igx-select-item value="Orange">Orange</igx-select-item>
    <igx-select-item value="Apple">Apple</igx-select-item>
    <igx-select-item value="Banana">Banana</igx-select-item>
    <igx-select-item value="Mango">Mango</igx-select-item>
</igx-select>

その他 *ngFor 構造ディレクティブに表示したい項目のコレクションを使用する方法があります。

public items: string[] = ["Orange", "Apple", "Banana", "Mango"];
<igx-select [(ngModel)]="selected">
    <label igxLabel>Simple Select</label>
    <igx-select-item *ngFor="let item of items" [value]="item">
        {{item}}
    </igx-select-item>
</igx-select>

デフォルトでは、Select コンポーネントは入力フィールドの item 要素の innerText を使用します。複雑な項目テンプレートの場合、text プロパティを明示的に設定して、項目が選択された場合入力フィールドに何を表示するかを指定できます。例:

<igx-select>
    <igx-select-item *ngFor="let item of items" [value]="item.value" [text]="item.text">
        {{item.text}} ( {{item.count}} )
    </igx-select-item>
</igx-select>

より複雑な項目テンプレートで text プロパティを確認するには、以下のグループ化サンプル グループ選択 を参照してください。

入力プロパティ

Select コンポーネントは、入力グループに適用可能な次のディレクティブをサポートしています。

  • igxLabel - Select 入力とのリンクは aria-labelledby を介して自動的に処理されるため、for プロパティを設定する必要はありません。
  • igx-prefix/igxPrefix
  • igx-suffix/igxSuffix - 組み込みのトグル ボタンサフィックスが常に最後に表示されることに注意してください。
  • igx-hint/igxHint
<igx-select [(ngModel)]="selected">
    <label igxLabel>Pick a fruit</label>
    <igx-prefix>
        <span class="bio-prefix">BIO</span>
    </igx-prefix>
    <igx-suffix *ngIf="selected">
        <igx-icon (click)="clearSelection($event)">clear</igx-icon>
    </igx-suffix>
    <igx-hint>Choose a banana</igx-hint>
    <igx-select-item *ngFor="let item of items" [value]="item">
        {{item}}
    </igx-select-item>
</igx-select>
Note

Select コンポーネントに placeholder が指定されておらず、選択も行われていない場合、igxLabel は遷移し、プレースホルダーが適切な場所に表示されます。

選択項目のグループ化

項目グループを視覚的に分離するために、Select コンポーネントは、項目を <igx-select-item-group> にラップすることで項目のグループ化をサポートします。 これは、コンポーネントを宣言するために反復可能な階層データに適しています。以下の例では、各グループには labelitems のコレクションがあります。

public greengrocery: Array<{ label: string, items: Array<{ type: string, origin: string }> }> = [
    { label: "Fruits", items: [
            { type: "Apple", origin: "local" },
            { type: "Orange", origin: "import" },
            { type: "Banana", origin: "import"}
        ]
    },
    { label: "Vegetables", items: [
            { type: "Cucumber", origin: "local" },
            { type: "Potato", origin: "import" },
            { type: "Pepper", origin: "local" }
        ]
    }
];

次にテンプレート ファイルでこれらのオブジェクトを反復して項目へ適切にアクセスします。

<igx-select #select>
    <label igxLabel>Select With Groups</label>
    <igx-select-item-group *ngFor="let group of greengrocery" [label]="group.label">
        <igx-select-item *ngFor="let item of group.items" [value]="item.type" [text]="item.type">
            {{item.type}}
            <igx-icon
                title="Local product"
                *ngIf="item.origin === 'local'; else templateImport"
            >local_shipping</igx-icon>
            <ng-template #templateImport>
                <igx-icon title="Import product">flight</igx-icon>
            </ng-template>
        </igx-select-item>
    </igx-select-item-group>
</igx-select>

ヘッダーとフッター

現在 Select コンポーネントにデフォルトのヘッダーとフッターのテンプレートはありません。ただし、ヘッダーまたはフッター テンプレートを追加するには、igxSelectHeader または igxSelectFooter でそれぞれマークします。これらはカスタム テンプレートであるため、スタイル設定も定義する必要があります。

以下の例では、ヘッダーとフッターの両方の ng テンプレートが定義されています。ヘッダーには、igx-buttongroup で実装された基本的なフィルタリングがあります。フッターには、配信方法に基づいて、すべての項目の静的な集計が含まれます。

<igx-select>
    <label igxLabel>Pick your fruit</label>
    <igx-select-item *ngFor="let fruit of fruits" [value]="fruit.type" [text]="fruit.type" [ngSwitch]="fruit.delivery">
        {{fruit.type}}
        <igx-icon *ngSwitchCase="'flight'">flight</igx-icon>
        <igx-icon *ngSwitchCase="'train'">train</igx-icon>
        <igx-icon *ngSwitchCase="'boat'">directions_boat</igx-icon>
    </igx-select-item>
    <ng-template igxSelectHeader>
        <div class="custom-select-header">
            <span class="sample-template-heading">DELIVERY METHOD</span>
            <igx-buttongroup (click)="filter($event.target.title)">
                    <button igxButton title="flight"><igx-icon title="flight">flight</igx-icon></button>
                    <button igxButton title="train"><igx-icon title="train">train</igx-icon></button>
                    <button igxButton title="boat"><igx-icon title="boat">directions_boat</igx-icon></button>
            </igx-buttongroup>
        </div>
    </ng-template>
    <ng-template igxSelectFooter>
        <div class="custom-select-footer">
            <span class="sample-template-heading">TOTAL</span>
            <div class="sample-template-icons">
                <span class="sample-template-icons__item">
                    <igx-icon
                        title="flight"
                        [class.important-icon]="selected === 'flight'"
                    >flight</igx-icon>
                    {{flightCount}}
                </span>
                <span class="sample-template-icons__item">
                    <igx-icon
                        title="train"
                        [class.important-icon]="selected === 'train'"
                    >train</igx-icon>
                    {{trainCount}}
                </span>
                <span class="sample-template-icons__item">
                    <igx-icon
                        title="boat"
                        [class.important-icon]="selected === 'boat'"
                    >directions_boat
                    </igx-icon>
                    {{boatCount}}
                </span>
            </div>
        </div>
    </ng-template>
</igx-select>

カスタム切り替えボタン

igxSelectToggleIcon ディレクティブを使用するか、あるいは toggleIconTemplate プロパティに TemplateRef を設定して、デフォルトの切り替えボタンをカスタマイズできます。

<igx-select #select>
    ...
    <ng-template igxSelectToggleIcon let-collapsed>
        <igx-icon>{{ collapsed ? 'add_circle' : 'add_circle_outline'}}</igx-icon>
    </ng-template>
    ...
<igx-select>

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

  • 選択がフォーカスされているときに SpaceEnter、または ALT + 上矢印/下矢印キーをクリックして、igx-select を開きます。
  • ALT + 上矢印/下矢印の組み合わせ、または EnterSpaceEscTab キーのいずれかを使用して、igx-select を閉じます。
  • 上矢印/下矢印キーを使用して項目間を移動します。
  • Home または End キーを使用して、リストの最初と最後の項目へ移動します。
  • 特定の文字で始まるリスト項目を移動するには、対応するキーを押します。
  • 必要な項目の最初の数文字を入力してすばやく特定の項目に移動できます。
  • Enter キーまたは Space キーを使用して項目を選択します。
Note

igx-select は項目の単一選択のみをサポートします。

カスタム オーバーレイ設定

カスタム OverlaySettings を作成できます。テンプレートを以下のように定義します。

<igx-select [overlaySettings]="customOverlaySettings">
    <igx-select-item *ngFor="let item of items">
        {{item}}
    </igx-select-item>
</igx-select>
  • overlaySettings プロパティがカスタム設定にバインドされます。

クラスの内側に以下のようなコードがあります。

export class MyClass implements OnInit {
    @ViewChild(IgxSelectComponent)
    public select: IgxSelectComponent;
    public items: string[] = ["Orange", "Apple", "Banana", "Mango", "Tomato"];
    public customOverlaySettings: OverlaySettings;

    public ngOnInit(): void {
        const positionSettings: PositionSettings = {
            closeAnimation: scaleOutBottom,
            horizontalDirection: HorizontalAlignment.Right,
            horizontalStartPoint: HorizontalAlignment.Left,
            openAnimation: scaleInTop,            
            verticalDirection: VerticalAlignment.Bottom,
            verticalStartPoint: VerticalAlignment.Bottom
        };
        this.customOverlaySettings = {
            target: this.select.inputGroup.element.nativeElement,
            positionStrategy: new ConnectedPositioningStrategy(
                positionSettings
            ),
            scrollStrategy: new AbsoluteScrollStrategy()
        };
    }
}

ConnectedPositioningStrategy に直接渡す PositionSettings オブジェクトを作成しましたが必須ではありません。ただし、カスタム ポジショニングを定義するためにストラテジのデフォルト設定をオーバーライドします。

  • ngOnInit フックの内側にすべて設定できます。コンポーネントの生成時にテンプレートに自動的に反映します。

テンプレートを以下のようにカスタマイズされた OverlaySettings オブジェクトを IgxSelectComponent の open 関数に渡すこともできます。

<igx-select>
    <igx-select-item *ngFor="let item of items">
        {{item}}
    </igx-select-item>
</igx-select>

<button (click)="onClick($event)"></button>

クラスには以下があります。

export class MyClass implements OnInit {
    /* -- */
    private otherCustomOverlaySettings: OverlaySettings = {
        positionStrategy: new GlobalPositionStrategy(),
        scrollStrategy: new AbsoluteScrollStrategy()
    }
    onClick(event: MouseEvent): void {
        this.select.open(this.otherCustomOverlaySettings)
    }
    /* -- */
}
Note

テンプレートと同様に関数 open の引数としてカスタム設定を渡す場合、igx-select は関数 open で提供されるものを使用します。ただし、onOpening または onOpened などのインターナル イベントにバインドした場合は、igx-select はテンプレートの設定を使用します。

スタイル設定

各コンポーネントには独自のテーマがあります。

Select のスタイルを設定するには、それに含まれるコンポーネントのスタイルを設定します。この場合、igx-input-group-themeigx-drop-down-theme の両方を使用する必要があります。

これら 2 つのコンポーネントのスタイル設定については、Input Group および Drop Down のスタイル設定セクションを参照してください。

Note

IgxSelectComponent は、IgxOverlay を使用して、igx-select-items リスト コンテナーを保持および表示します。スタイルを適切にスコープするには、OverlaySetting.outlet を使用してください。詳細については、IgxOverlay スタイル ガイドを確認してください。

API リファレンス

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。