Ignite UI for Angular Drop Down は、単一項目の選択が可能なグループ項目をスクロール付きのリストで表示します。項目をクリックまたはタップして選択するとドロップダウンが閉じられます。

Note

Ignite UI for Angular コンポーネントをプロジェクトに追加する前に、必要なすべての依存関係を構成し、プロジェクトのセットアップが正しく完了したことを確認してください。インストール のトピックで手順を確認できます。

使用方法

Ignite UI for Angular Drop Down コンポーネントを初期化する前に IgxDropDownModuleapp.module.ts ファイルにインポートします。

// app.module.ts

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

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

選択可能な複数のオプション項目を提供するシンプルなドロップダウンを作成します。igx-drop-down コンポーネントと igxToggleAction を使用してドロップダウンの開く/閉じるを有効にします。

構成の後、すべてのオプションを IgxDropDownComponent コンポーネントに表示します。ドロップダウンは、ドロップダウン項目として複数のオプションを含みます。

<!-- dropdown.component.html -->

<div class="sample-wrapper drop-down-wrapper">
    <button igxButton="raised" (click)="toggleDropDown($event)" [igxDropDownItemNavigation]="dropdown1">Options</button>
    <igx-drop-down #dropdown1>
        <igx-drop-down-item *ngFor="let item of items">
            {{ item.field }}
        </igx-drop-down-item>
    </igx-drop-down>
</div>
// dropdown.component.ts

...
    @ViewChild(IgxDropDownComponent) public igxDropDown: IgxDropDownComponent;

    public items: any[] = [];

    private _positionSettings = {
        horizontalStartPoint: HorizontalAlignment.Left,
        verticalStartPoint: VerticalAlignment.Bottom
    };
    private _overlaySettings = {
      closeOnOutsideClick: true,
      modal: false,
      positionStrategy: new ConnectedPositioningStrategy(this._positionSettings),
      scrollStrategy: new CloseScrollStrategy()
    };

    public ngOnInit() {
        for (let i = 1; i < 4; i ++) {
            const item = { field: "Option " + i };
            this.items.push(item);
        }
    }

    public toggleDropDown(eventArgs) {
        this._overlaySettings.positionStrategy.settings.target = eventArgs.target;
        this.igxDropDown.toggle(this._overlaySettings);
    }

サンプルを正しく構成すると、複数のオプションを含むドロップダウンが表示されます。

選択済み項目の定義

選択済みの項目をあらかじめ定義する場合、IgxDropDownComponentigx-drop-down onOpening イベントを処理します。

<!-- dropdown.component.html -->

<div class="sample-wrapper drop-down-wrapper">
    <button igxButton="raised" (click)="toggleDropDown($event)" [igxDropDownItemNavigation]="dropdown2">Options</button>
    <igx-drop-down #dropdown2 (onOpening)="onOpening($event)">
        <igx-drop-down-item *ngFor="let item of items">
            {{ item.field }}
        </igx-drop-down-item>
    </igx-drop-down>
</div>
// dropdown.component.ts

...
    @ViewChild(IgxDropDownComponent) public igxDropDown: IgxDropDownComponent;

    public items: any[] = [];

    private _positionSettings = {
        horizontalStartPoint: HorizontalAlignment.Left,
        verticalStartPoint: VerticalAlignment.Bottom
    };

    private _overlaySettings = {
      closeOnOutsideClick: true,
      modal: false,
      positionStrategy: new ConnectedPositioningStrategy(this._positionSettings),
      scrollStrategy: new CloseScrollStrategy()
  };

    public ngOnInit() {
        for (let i = 1; i < 4; i ++) {
            const item = { field: "Option " + i };
            this.items.push(item);
        }
    }

    public toggleDropDown(eventArgs) {
        this._overlaySettings.positionStrategy.settings.target = eventArgs.target;
        this.igxDropDown.toggle(this._overlaySettings);
    }

isHeader を使用して意味的なグループ化や disabled を使用して非インタラクティブな項目を表示するなど、有用なビジュアル情報を提供できます。また isSelected は特定の項目に設定して選択項目にできます。

<!-- dropdown.component.html -->

<div class="sample-wrapper drop-down-wrapper">
    <button igxButton="raised" (click)="toggleDropDown($event)" [igxDropDownItemNavigation]="dropdown3">Countries</button>
    <igx-drop-down #dropdown3>
        <igx-drop-down-item *ngFor="let item of items" [disabled]="item.disabled" [isHeader]="item.header" [isSelected]="item.selected">
            {{ item.field }}
        </igx-drop-down-item>
    </igx-drop-down>
</div>
// dropdown.component.ts

...
    @ViewChild(IgxDropDownComponent) public igxDropDown: IgxDropDownComponent;

    public items: any[] = [
        { field: "EU", header: true },
        { field: "Germany" },
         { field: "Bulgaria", selected: true },
        { field: "UK", disabled: true },
        { field: "NA", header: true },
        { field: "Canada" },
        { field: "USA" },
        { field: "Mexico" }];

    private _positionSettings = {
        horizontalStartPoint: HorizontalAlignment.Left,
        verticalStartPoint: VerticalAlignment.Bottom
    };

    private _overlaySettings = {
      closeOnOutsideClick: true,
      modal: false,
      positionStrategy: new ConnectedPositioningStrategy(this._positionSettings),
      scrollStrategy: new CloseScrollStrategy()
  };

    public toggleDropDown(eventArgs) {
        this._overlaySettings.positionStrategy.settings.target = eventArgs.target;
        this.igxDropDown.toggle(this._overlaySettings);
    }

サンプルを正しく構成すると EU ヘッダーの下に国の一覧がグループ形式で表示され、UK は非インタラクティブな項目、そして Bulgaria は選択済みの項目として表示されます。

ドロップダウン メニュー

igxDropDown を設定してメニューとして使用できます。onSelection イベント ハンドラーで ISelectionEventArgs cancel メンバーを true に設定します。そのため選択した項目は開いているメニューに保存されずに選択が無効になります。ISelectionEventArgs newSelection メンバー値でクリックした項目を取得できます。

<!-- dropdown.component.html -->

<div class="drop-down-wrapper">
    <igx-navbar title="Contacts">
        <igx-icon #menu_icon (click)="toggleMenu($event)" [igxDropDownItemNavigation]="menu" tabindex="0">more_vert</igx-icon>
        <igx-drop-down #menu (onSelection)="onSelection($event)">
            <igx-drop-down-item *ngFor="let item of items" [value]="item.text">
                <div>{{ item.text }}</div>
            </igx-drop-down-item>
        </igx-drop-down>
    </igx-navbar>

    <div class="textContainer">
        <ng-container *ngIf="text">
            <label igxLabel>Clicked menu item: {{ text }}</label>
        </ng-container>
    </div>

    <div class="overlayOutlet" igxOverlayOutlet #outlet="overlay-outlet"></div>
</div>
// dropdown.component.ts

...
@ViewChild(IgxOverlayOutletDirective) public igxOverlayOutlet: IgxOverlayOutletDirective;
@ViewChild(IgxDropDownComponent) public menu: IgxDropDownComponent;

public items: any[] = [];
public text;

private positionSettings = {
    horizontalDirection: HorizontalAlignment.Left,
    horizontalStartPoint: HorizontalAlignment.Right,
    verticalStartPoint: VerticalAlignment.Bottom
};

public ngOnInit() {
    this.items = [{ text: "Add New Contact" }, { text: "Edit Contact" }, { text: "Refresh" }, { text: "Help" }];
}

public onSelection(eventArgs: ISelectionEventArgs) {
    this.text = eventArgs.newSelection.value;
    eventArgs.cancel = true;
}

public toggleMenu(eventArgs) {
    const overlaySettings: OverlaySettings = {
        closeOnOutsideClick: true,
        modal: false,
        outlet: this.igxOverlayOutlet,
        positionStrategy: new ConnectedPositioningStrategy(this.positionSettings),
        scrollStrategy: new NoOpScrollStrategy()
    };

    overlaySettings.positionStrategy.settings.target = eventArgs.target;
    this.menu.toggle(overlaySettings);
}

igxDropDown コンポーネントのキーボード ナビゲーションを有効にするには、igxDropDownItemNavigation ディレクティブを適用します。ディレクティブをアクティブ (フォーカスした) 要素または親コンテナに適用することにより、トリガーしたすべてのイベントを処理できるようになります。デフォルトでは、igxDropDown またはその項目にフォーカスが当たらないため、たとえばディレクティブをドロップダウンを制御するボタン入力に配置できます。 igxDropDownItemNavigation ディレクティブ値は、ターゲット コンポーネントまたは拡張 IgxDropDownBase クラスにする必要があります。

以下のサンプルは、クリックによって igxDropDown インスタンスを開いたり閉じたりする例です。入力に igxDropDownItemNavigation を適用し、上矢印と下矢印の使用時にキーボード ナビゲーションを有効にします。allowItemsFocus が無効のデフォルトのドロップダウン動作に依存し、ボタン入力にフォーカスを維持することが可能です。

<!-- input-dropdown.component.html -->
    <igx-input-group #inputGroup class="input-group" [igxToggleAction]="dropDown">
        <input #input class="input" type="text" igxInput [igxDropDownItemNavigation]="igxDropDown"
            readonly= "true"
            placeholder="choose an option"
            [(ngModel)]="this.value"
            (keydown.ArrowDown)="openDropDown()"/>

        <igx-suffix igxButton="icon" class="dropdownToggleButton" igxRipple>
            <igx-icon *ngIf="igxDropDown.collapsed; else toggleUp" fontSet="material">arrow_drop_down</igx-icon>
            <ng-template #toggleUp>
                <igx-icon fontSet="material">arrow_drop_up</igx-icon>
            </ng-template>
        </igx-suffix>
    </igx-input-group>
    <span>Selected: {{this.value}}</span>
    <igx-drop-down #dropDown [width]="'160px'" (onSelection)="onSelection($event)">
        <igx-drop-down-item *ngFor="let item of items" [value]="item.field">
            {{ item.field }}
        </igx-drop-down-item>
    </igx-drop-down>
// input-dropdown.component.ts
    @ViewChild(IgxDropDownComponent) public igxDropDown: IgxDropDownComponent;
    @ViewChild("inputGroup", { read: IgxInputGroupComponent}) public inputGroup: IgxInputGroupComponent;
    @ViewChild("input", { read: IgxInputDirective })
    public input: IgxInputDirective;

    public items: any[] = [];
    public value: string;

    public ngOnInit() {
        for (let i = 1; i < 4; i ++) {
            const item = { field: "Option " + i };
            this.items.push(item);
        }
    }

    public onSelection(eventArgs: ISelectionEventArgs) {
        this.value = eventArgs.newSelection.value;
    }

    public openDropDown() {
        if (this.igxDropDown.collapsed) {
            this.igxDropDown.open({
                modal: false,
                positionStrategy: new ConnectedPositioningStrategy({
                    target: this.inputGroup.element.nativeElement
                })
            });
        }
    }

ディレクティブを適用すると、キーボード ナビゲーションの結果として以下の動作が実行します。

名前 説明
Enter ドロップダウンから項目の選択後、ドロップダウンを閉じます。
Space ドロップダウンから項目の選択後、ドロップダウンを閉じます。
Esc ドロップダウンを閉じます。
Arrow Down ターゲット コンポーネントの次の項目に移動します。
Arrow Up ターゲット コンポーネントの前の項目に移動します。
End ターゲット コンポーネントの最後の項目に移動します。
Home ターゲット コンポーネントの最初の項目に移動します。

allowItemsFocus が有効な場合、ドロップダウン項目がタブ インデックスを取得し、アクティブな時にフォーカスされます。フォーカスされたドロップダウン項目がキーボード ナビゲーション時にイベントをトリガーするため、 igxDropDownItemNavigation を各ドロップダウン項目に適用する必要があります。

<igx-input-group [igxToggleAction]="dropDown">
    <input igxInput type="text">
</igx-input-group>
<igx-drop-down #dropDown [allowItemsFocus]="true">
    <igx-drop-down-item *ngFor="let p of provinceData" [igxDropDownItemNavigation]="dropDown">
        {{ p }}
    </igx-drop-down-item>
</igx-drop-down>

API まとめ

igx-drop-down コンポーネント API 参照テーマの参照

igx-drop-down-item コンポーネント API 参照

その他のリソース

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