Angular Drop Down の概要

Ignite UI for Angular Drop Down は事前定義された値の切り替え可能なリストを表示し、ユーザーがクリックするだけで 1 つのオプション項目を簡単に選択できるようにするコンポーネントです。ドロップダウン メニューとして機能するようにすばやく構成することも、データをグループ化することでより有用な視覚情報を提供するために使用することもできます。グループ化を使用すると、フラット データと階層データの両方を使用できます。Drop Down コンポーネントを使用すると、宣言型のバインディングが可能になり、追加のコンテンツやリンクを埋め込むことができます。これにより、UI をさらにカスタマイズして Angular ドロップダウン リストの外観をスタイル設定する余地も残されます。これに加えて、キーボードのドロップダウン ナビゲーションや仮想化などの主要な機能が満載です。

Angular Drop Down の例

この Angular ドロップダウンの例は、ドロップダウン リストの基本的な機能を示しています。それをクリックしてプリセット オプションを展開し、項目を選択して、ドロップダウンを閉じます。

Ignite UI for Angular Drop Down で作業を開始

Angular アプリの Ignite UI Drop Down コンポーネントを簡単に構成する方法をご覧ください。以下のセクションでは、IgxDropDownModule をインポートし、単純な Angular Drop Down リストを作成する方法について説明します。

はじめに

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

// app.module.ts

...
import { IgxDropDownModule } from 'igniteui-angular';
// import { IgxDropDownModule } from '@infragistics/igniteui-angular'; for licensed package

@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' }
    ];
}

その他の Angular Drop Down の例

デフォルトのデモでは、Angular で切り替え可能な Drop Down リストを使用して、エンドユーザーが事前定義されたすべての項目を展開し、そのうちの 1 つを選択できるようにしています。次の例は、Angular Drop Down リストの動作を示しています。

定義済みの選択項目

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

<!-- dropdown.component.html -->
<button igxButton="raised" 
        [igxToggleAction]="dropdown" 
        [igxDropDownItemNavigation]="dropdown">
        Options
</button>
<igx-drop-down #dropdown (opening)="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 プロパティを特定の項目に設定して選択済の項目にできます。igx-drop-down 項目は、HTML 要素/他の Web コンポーネントに含める、または設定できる igxPrefix、igxSuffix および igx-divider ディレクティブをサポートしています。

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

// dropdown.component.ts
export class MyDropDownComponent {
    public items: any[] = [
        { field: 'European Union', code: 'EU', header: true },
        { field: 'Germany', code: 'DE' },
        { field: 'Bulgaria', code: 'BG', selected: true },
        { field: 'France', code: 'FR', disabled: true },
        { field: 'North America', code: 'NA', header: true },
        { field: 'Canada', code: 'CA' },
        { field: 'United States', code: 'US' },
        { field: 'Mexico', code: 'MX' }
    ];
}

サンプルを正しく構成すると European Union ヘッダーの下に国の一覧がグループ形式で表示され、France は非インタラクティブな項目、そして 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>

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

ドロップダウン メニュー

ドロップダウンをメニューとして動作するように構成できます。selecting イベント ハンドラーで 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 (selectionChanging)="selecting($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 selecting(eventArgs: ISelectionEventArgs) {
        this.text = eventArgs.newSelection.value;
        eventArgs.cancel = true;
    }
}

Navigation ディレクティブ

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 ファイルをインポートする必要があります。

@use "igniteui-angular/theming" as *;

// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';

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

$custom-drop-down-theme: 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 css-vars($custom-drop-down-theme);

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

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

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

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

Note

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

デモ

API リファレンス

• IgxDropDownComponent
• IgxDropDownComponent スタイル
• IgxDropDownItemComponent
• IgxOverlay
• IgxOverlay スタイル
• IgxDividerDirective
• IgxDividerDirective スタイル

テーマの依存関係

• IgxOverlay テーマ

その他のリソース

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

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)