Drop Down

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

    Angular Drop Down の例

    使用方法

    はじめに

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

    // app.module.ts
    
    ...
    import { IgxDropDownModule } from 'igniteui-angular';
    
    @NgModule({
        ...
        imports: [..., IgxDropDownModule],
        ...
    })
    export class AppModule {}
    

    ドロップダウンの追加

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

    <!-- 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 プロパティを特定の項目に設定して選択済の項目にできます。igx-drop-down 項目は、HTML 要素/他の Web コンポーネントに含める、または設定できる igxPrefixigxSuffix および 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>
    

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

    ドロップダウン メニュー

    ドロップダウンをメニューとして動作するように構成できます。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 リファレンス

    テーマの依存関係

    その他のリソース

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