Drop Down

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

Angular Drop Down の例

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

使用方法

はじめに

Drop Down コンポーネントを使用するには、まず IgxDropDownModule を app.module.ts ファイルにインポートします。

// app.module.ts

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

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

ドロップダウンの追加

選択可能な複数のオプション項目を提供するシンプルなドロップダウンを作成します。これを実現するには、IgxDropDownComponent と IgxToggleAction を使用してドロップダウンを開きます / 閉じます。

<!-- dropdown.component.html -->
<button igxButton="raised" 
        [igxToggleAction]="dropdown"
        [igxDropDownItemNavigation]="dropdown">
        Options
</button>
<igx-drop-down #dropdown>
    <igx-drop-down-item *ngFor="let item of items">
        {{ item.field }}
    </igx-drop-down-item>
</igx-drop-down>

// dropdown.component.ts
export class MyDropDownComponent {
    public items: Array<{ field: string }> = [
        { field: "Option 1" },
        { field: "Option 2" },
        { field: "Option 3" }
    ];
}

例

定義済みの選択項目

定義済みの選択項目を作成したいとします。1 つの方法は、ドロップダウンコンポーネントの onOpening イベントを処理することです。

<!-- dropdown.component.html -->
<button igxButton="raised" 
        [igxToggleAction]="dropdown" 
        [igxDropDownItemNavigation]="dropdown">
        Options
</button>
<igx-drop-down #dropdown (onOpening)="dropdown.setSelectedItem(0)">
    <igx-drop-down-item *ngFor="let item of items">
        {{ item.field }}
    </igx-drop-down-item>
</igx-drop-down>

// dropdown.component.ts
export class MyDropDownComponent {
    public items: Array<{ field: string }> = [
        { field: "Option 1" },
        { field: "Option 2" },
        { field: "Option 3" }
    ];
}

項目のグループ化

より有益な視覚情報を提供するには、isHeader プロパティを使用して項目をセマンティックにグループ化するか、disabled プロパティを使用して項目を非インタラクティブとして表示します。selected プロパティを特定の項目に設定して選択済の項目にできます。

<!-- dropdown.component.html -->
<button igxButton="raised" 
        [igxToggleAction]="dropdown"
        [igxDropDownItemNavigation]="dropdown">
        Countries
</button>
<igx-drop-down #dropdown [width]="'144px'">
    <div class="drop-down__scroll-container">
        <igx-drop-down-item *ngFor="let item of items" 
                            [disabled]="item.disabled"
                            [isHeader]="item.header"
                            [selected]="item.selected">
            {{ item.field }}
        </igx-drop-down-item>
    </div>
</igx-drop-down>

// dropdown.component.ts
export class MyDropDownComponent {
    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" }
    ];
}

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

階層データのグループ化

igx-drop-down 項目は igx-drop-down-item-group コンテナーによりグループ化して、ユーザーが個別のカテゴリを区別しやすくなります。igx-drop-down-item-group は、igx-drop-down-item 要素をコンテンツとして受け取り、グループ形式で描画します。

// dropdown.component.ts
export class MyCustomDropDownComponent {
    ...
    public foods: { 
        name: string,
        entries: { name: string, refNo: string }[]
    }[] = [
    {
        name: 'Vegetables',
        entries: [{
            name: 'Cucumber',
            refNo: `00000`
        }, {
        name: 'Lettuce',
        refNo: `00001`
        },
        ...]
    }, {
        name: 'Fruits',
        entries: [{
            name: 'Banana',
            refNo: `10000`
        }, {
            name: 'Tomato',
            refNo: `10001`
        },
        ...]
    }, {
        name: 'Meats',
        entries: [{
            name: 'Chicken',
            refNo: `20000`
        }, {
            name: 'Beef',
            refNo: `20001`
        },
        ...]
    }];
}

<igx-drop-down>
    <igx-drop-down-item-group *ngFor="let foodGroup of foods" [label]="foodGroup.name">
        <igx-drop-down-item *ngFor="let food of foodGroup.entries" [value]='food.refNo'>
            {{ food.name }}
        </igx-drop-down-item>
    </igx-drop-down-item-group>
</igx-drop-down>

更にグループには本体の項目を無効にする機能があります。たとえば、Meats 食品グループのドロップダウン選択を無効にする場合です。Meats のすべてのエントリを個別に無効にする代わりに、グループおよび内部のすべての子項目を無効にできます。

<igx-drop-down>
    <igx-drop-down-item-group *ngFor="let foodGroup of foods" [label]="foodGroup.name" [disabled]="foodGroup.name === 'Meats'">
        <igx-drop-down-item *ngFor="let food of foodGroup.entries" [value]='food.refNo'>
            {{ food.name }}
        </igx-drop-down-item>
    </igx-drop-down-item-group>
</igx-drop-down>

以下のサンプルで結果を確認できます。

ドロップダウンメニュー

ドロップダウンをメニューとして動作するように構成できます。onSelection イベントハンドラーで ISelectionEventArgs インターフェイスの cancel メンバーを true に設定します。この方法では、メニューを開いた際に選択した項目が保持されず、前の選択が無効になります。クリックされた項目は、イベントの newSelection メンバー値で取得できます。

<!-- dropdown.component.html -->
<div>
    <igx-navbar title="Contacts">
        <button [igxToggleAction]="menu"
                [igxToggleOutlet]="outlet"
                [overlaySettings]="overlaySettings"
                [igxDropDownItemNavigation]="menu"
                igxButton="icon">
            <igx-icon fontSet="material">more_vert</igx-icon>
        </button>
        <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>
        <ng-container *ngIf="text">
            <label igxLabel>{{ text }}</label>
        </ng-container>
    </div>

    <div igxOverlayOutlet #outlet="overlay-outlet"></div>
</div>

// dropdown.component.ts
export class MyMenuComponent {
    public items: Array<{ text: string }> =
        [{ text: "Add New Contact" }, { text: "Edit Contact" }, { text: "Refresh" }, { text: "Help" }];
    public text: string;
    public overlaySettings = {
        positionStrategy: new ConnectedPositioningStrategy({
            horizontalDirection: HorizontalAlignment.Left,
            horizontalStartPoint: HorizontalAlignment.Right,
            verticalStartPoint: VerticalAlignment.Bottom
        }),
        scrollStrategy: new NoOpScrollStrategy()
    };

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

igxDropDownItemNavigation ディレクティブを使用して、igxDropDown コンポーネントのキーボードナビゲーションを有効にします。ディレクティブがトリガーされたすべてのイベントを処理できるようにするには、アクティブな (フォーカスされる) 要素または親コンテナーに適用する必要があります。デフォルトでは、ドロップダウンまたはその項目はフォーカスを取得しないため、ディレクティブはドロップダウンを制御する button または input に配置できます。ナビゲーションディレクティブの値は、IgxDropDownBaseDirective クラスのインスタンスまたは子孫であるコンポーネントを対象とする必要があります。

以下のサンプルでは、クリックで igxDropDown インスタンスを開閉できます。入力自体に igxDropDownItemNavigation ディレクティブを適用すると、上下矢印キーを使用するキーボードナビゲーションが有効になります。これは、allowItemsFocus プロパティを false に設定し、入力でフォーカスを維持できるデフォルトのドロップダウン動作に依存します。

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

    <igx-suffix igxButton="icon" igxRipple>
        <igx-icon>arrow_drop{{ dropDown.collapsed ? '_down' : '_up' }}</igx-icon>
    </igx-suffix>
</igx-input-group>

<span>Selected: {{ dropDown.selectedItem?.value }}</span>
<igx-drop-down #dropDown [width]="'160px'">
    <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
export class InputDropDownComponent {
    @ViewChild(IgxDropDownComponent) public igxDropDown: IgxDropDownComponent;
    @ViewChild("inputGroup", { read: IgxInputGroupComponent}) public inputGroup: IgxInputGroupComponent;

    public items: Array<{ field: string }> = [
        { field: "Option 1" },
        { field: "Option 2" },
        { field: "Option 3" }
    ];

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

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

スタイル設定

Ignite UI for Angular テーマを使用して、ドロップダウンの外観を変更できます。はじめに、テーマエンジンによって公開されている関数を使用するために、スタイルファイルに index ファイルをインポートする必要があります。

@import '~igniteui-angular/lib/core/styles/themes/index';

最も簡単な方法は、igx-drop-down-theme を拡張する新しいテーマを作成し、デフォルトテーマのいくつかのパラメーターを受け取る方法です。

$custom-drop-down-theme: igx-drop-down-theme(
    $background-color: #fdfdfd,
    $header-text-color: #345779,
    $item-text-color: #2dabe8,
    $selected-item-background: #345779,
    $selected-item-text-color: #fdfdfd,
    $selected-hover-item-background: #345779,
    $selected-hover-item-text-color: #fdfdfd,
    $selected-focus-item-background: #345779,
    $selected-focus-item-text-color: #fdfdfd,
    $hover-item-background: rgba(0, 0, 0, 0.12),
    $hover-item-text-color: #345779,
);

CSS 変数の使用

最後にカスタムドロップダウンテーマを設定します。

 @include igx-css-vars($custom-drop-down-theme);

テーマオーバーライドの使用

Internet Explorer 11 などの古いブラウザーのコンポーネントをスタイル設定するには、CSS 変数をサポートしていないため、別のアプローチを用いる必要があります。

コンポーネントが Emulated ViewEncapsulation を使用している場合、::ng-deep を使用してこのカプセル化を解除する必要があります。カスタムテーマが他のコンポーネントに影響しないようにするには、::ng-deep の前に :host セレクターを含めるようにしてください。

:host {
 ::ng-deep {
   @include igx-drop-down($custom-drop-down-theme);
 }
}

Note

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

デモ

API リファレンス

その他のリソース

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