Angular Drop Down (ドロップダウン) コンポーネントの概要

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

Angular Drop Down の例

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

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxDropDownModule,
	IgxButtonModule,
	IgxToggleModule
 } from "igniteui-angular";
import { DropDownSample1Component } from "./dropdown-sample-1/dropdown-sample-1.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	DropDownSample1Component
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxDropDownModule,
	IgxButtonModule,
	IgxToggleModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component } from '@angular/core';
@Component({
    // tslint:disable-next-line:component-selector
    selector: 'app-dropdown-sample-1',
    styleUrls: ['./dropdown-sample-1.component.scss'],
    templateUrl: './dropdown-sample-1.component.html'
})
export class DropDownSample1Component {
    public items: { field: string }[] = [
        { field: 'Option 1' },
        { field: 'Option 2' },
        { field: 'Option 3' }
    ];
}
tsコピー

<button class="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>
htmlコピー

.button {
    margin: 8px;
    width: 128px;
}
scssコピー

Edit in: CodesandboxStackBlitz

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

60 以上のコンポーネント、柔軟な API、強力なテーマ設定およびブランディング機能、必要な速度と機能を備えた Angular アプリケーションを構築するための豊富な機能セット。

無料で試してみる

Ignite UI for Angular Drop Down を使用した作業の開始

Ignite UI for Angular Drop Down コンポーネントを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。

ng add igniteui-angular
cmd

Ignite UI for Angular については、「はじめに」トピックをご覧ください。

次に、app.module.ts ファイルに IgxDropDownModule をインポートします。

// app.module.ts

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

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

あるいは、16.0.0 以降、IgxDropDownComponent をスタンドアロンの依存関係としてインポートすることも、IGX_DROP_DOWN_DIRECTIVES トークンを使用してコンポーネントとそのすべてのサポート コンポーネントおよびディレクティブをインポートすることもできます。

// home.component.ts

import { NgFor } from '@angular/common';
import { IGX_DROP_DOWN_DIRECTIVES, IgxToggleActionDirective, IgxButtonDirective } from 'igniteui-angular';
// import { IGX_DROP_DOWN_DIRECTIVES, IgxToggleActionDirective, IgxButtonDirective } from '@infragistics/igniteui-angular'; for licensed package

@Component({
  selector: 'app-home',
  template: `
    <button
      igxButton="contained"
      [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>
  `,
  styleUrls: ['home.component.scss'],
  standalone: true,
  imports: [ IGX_DROP_DOWN_DIRECTIVES, IgxToggleActionDirective, IgxButtonDirective, NgFor ],
  /* or imports: [IgxDropDownComponent, IgxDropDownItemComponent, IgxToggleActionDirective, IgxButtonDirective, NgFor] */
})
export class HomeComponent {}
typescript

Ignite UI for Angular Drop Down モジュールまたはディレクティブをインポートしたので、igx-drop-down コンポーネントの使用を開始できます。

Angular Drop Down の使用

ドロップダウンの追加

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

<!-- dropdown.component.html -->
<button igxButton="contained" [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>
html

// dropdown.component.ts
@Component({...})
export class MyDropDownComponent {
    public items: Array<{ field: string }> = [
        { field: 'Option 1' },
        { field: 'Option 2' },
        { field: 'Option 3' }
    ];
}
typescript

その他の Angular Drop Down の例

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

定義済みの選択項目

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

<!-- dropdown.component.html -->
<button igxButton="contained" [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>
html

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

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxDropDownModule,
	IgxButtonModule,
	IgxToggleModule
 } from "igniteui-angular";
import { DropDownSample2Component } from "./dropdown-sample-2/dropdown-sample-2.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	DropDownSample2Component
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxDropDownModule,
	IgxButtonModule,
	IgxToggleModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component } from '@angular/core';

@Component({
    // tslint:disable-next-line:component-selector
    selector: 'app-dropdown-sample-2',
    styleUrls: ['./dropdown-sample-2.component.scss'],
    templateUrl: './dropdown-sample-2.component.html'
})
export class DropDownSample2Component {
    public items: { field: string }[] = [
        { field: 'Option 1' },
        { field: 'Option 2' },
        { field: 'Option 3' }
    ];
}
tsコピー

<button class="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>
htmlコピー

.button {
    margin: 8px;
    width: 128px;
}
scssコピー

Edit in: CodesandboxStackBlitz

項目のグループ化

より有益な視覚情報を提供するには、isHeader プロパティを使用して項目をセマンティックにグループ化するか、disabled プロパティを使用して項目を非インタラクティブとして表示します。selected プロパティを特定の項目に設定して選択済の項目にできます。igx-drop-down 項目は、HTML 要素/他の Web コンポーネントに含める、または設定できる igxPrefix、igxSuffix および igx-divider ディレクティブをサポートしています。

<!-- dropdown.component.html -->
<button igxButton="contained" [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>
html

// 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' },
  ];
}
typescript

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

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxDropDownModule,
	IgxButtonModule,
	IgxToggleModule,
	IgxPrefixModule,
	IgxSuffixModule,
	IgxIconModule,
	IgxDividerModule
 } from "igniteui-angular";
import { DropDownSample3Component } from "./dropdown-sample-3/dropdown-sample-3.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	DropDownSample3Component
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxDropDownModule,
	IgxButtonModule,
	IgxToggleModule,
	IgxPrefixModule,
	IgxSuffixModule,
	IgxIconModule,
	IgxDividerModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component } from '@angular/core';

@Component({
    // tslint:disable-next-line:component-selector
    selector: 'app-dropdown-sample-3',
    styleUrls: ['./dropdown-sample-3.component.scss'],
    templateUrl: './dropdown-sample-3.component.html'
})
export class DropDownSample3Component {

    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' }
    ];
}
tsコピー

<button class="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" [class.drop-down-header]="item.header">
            <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>
htmlコピー

.button {
    margin: 8px;
    width: 240px;
}

.drop-down__scroll-container {
    max-height: 240px;
}

.drop-down-header igx-icon {
    display: none;
}
scssコピー

Edit in: CodesandboxStackBlitz

階層データのグループ化

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'
        },
        ...]
    }];
}
typescript

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

更にグループには本体の項目を無効にする機能があります。たとえば、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>
html

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

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxDropDownModule,
	IgxButtonModule,
	IgxSwitchModule,
	IgxToggleModule
 } from "igniteui-angular";
import { DropDownSample5Component } from "./dropdown-sample-5/dropdown-sample-5.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	DropDownSample5Component
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxDropDownModule,
	IgxButtonModule,
	IgxSwitchModule,
	IgxToggleModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component } from '@angular/core';

@Component({
    // tslint:disable-next-line:component-selector
    selector: 'app-dropdown-sample-5',
    styleUrls: ['./dropdown-sample-5.component.scss'],
    templateUrl: './dropdown-sample-5.component.html'
})
export class DropDownSample5Component {
    public disableMeats = false;

    // tslint:disable:object-literal-sort-keys
    public foods: {
        name: string;
        entries: { name: string; refNo: string }[];
    }[] = [{
        name: 'Vegetables',
        entries: [{
            name: 'Cucumber',
            refNo: `00000`
        }, {
            name: 'Lettuce',
            refNo: `00001`
        }, {
            name: 'Cabbage',
            refNo: `00002`
        }]
    }, {
        name: 'Fruits',
        entries: [{
            name: 'Banana',
            refNo: `10000`
        }, {
            name: 'Tomato',
            refNo: `10001`
        }, {
            name: 'Kiwi',
            refNo: `10002`
        }]
    }, {
        name: 'Meats',
        entries: [{
            name: 'Chicken',
            refNo: `20000`
        }, {
            name: 'Beef',
            refNo: `20001`
        }, {
            name: 'Veal',
            refNo: `20002`
        }]
    }];
}
tsコピー

<div class='controls-wrapper'>
    <button class="button" igxButton="raised" [igxToggleAction]="dropDown"
        [igxDropDownItemNavigation]="dropDown">Foods</button>
    <igx-switch [(ngModel)]="disableMeats">
        Disable 'Meats'
    </igx-switch>
</div>
<igx-drop-down #dropDown [width]="'160px'">
    <div class="drop-down__scroll-container">
        <igx-drop-down-item-group *ngFor="let foodGroup of foods" [label]="foodGroup.name"
            [disabled]="disableMeats && 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>
    </div>
</igx-drop-down>
htmlコピー

.button {
    width: 160px;
}

.controls-wrapper {
    display: flex;
    flex-flow: row;
    max-width: 450px;
    margin: 8px;
}

igx-switch {
    padding-left: 24px;
}

.drop-down__scroll-container {
    max-height: 240px;
}
scssコピー

Edit in: CodesandboxStackBlitz

ドロップダウン メニュー

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

<!-- dropdown.component.html -->
<div>
  <igx-navbar title="Contacts">
    <button
      [igxToggleAction]="menu"
      [igxToggleOutlet]="outlet"
      [overlaySettings]="overlaySettings"
      [igxDropDownItemNavigation]="menu"
      igxIconButton="flat"
    >
      <igx-icon fontSet="material">more_vert</igx-icon>
    </button>
    <igx-drop-down #menu (selectionChanging)="selectionHandler($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>
html

// 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 selectionHandler(eventArgs: ISelectionEventArgs) {
    this.text = eventArgs.newSelection.value;
    eventArgs.cancel = true;
  }
}
typescript

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxDropDownModule,
	IgxIconModule,
	IgxNavbarModule,
	IgxButtonModule,
	IgxToggleModule
 } from "igniteui-angular";
import { DropdownMenuComponent } from "./dropdown-menu/dropdown-menu.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	DropdownMenuComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxDropDownModule,
	IgxIconModule,
	IgxNavbarModule,
	IgxButtonModule,
	IgxToggleModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component } from '@angular/core';
import {
    ConnectedPositioningStrategy, HorizontalAlignment,
    ISelectionEventArgs, NoOpScrollStrategy, VerticalAlignment
} from 'igniteui-angular';

@Component({
    selector: 'app-dropdown-menu',
    styleUrls: ['./dropdown-menu.component.scss'],
    templateUrl: './dropdown-menu.component.html'
})
export class DropdownMenuComponent {
    public items: { 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;
    }
}
tsコピー

<div class="drop-down-wrapper">
    <igx-navbar title="Contacts">
        <button [igxToggleAction]="menu" [igxToggleOutlet]="outlet" [overlaySettings]="overlaySettings" [igxDropDownItemNavigation]="menu"
            igxButton="icon">
            <igx-icon family="material">more_vert</igx-icon>
        </button>
        <igx-drop-down #menu (selectionChanging)="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>{{ text }}</label>
        </ng-container>
    </div>

    <div class="overlayOutlet" igxOverlayOutlet #outlet="overlay-outlet"></div>
</div>
htmlコピー

@use '../../variables' as *;

.drop-down-wrapper {
    width: 30%;
    margin: 8px;
    min-width: 280px;
    box-shadow: 0 1px 3px 0 elevation(2);

    .textContainer {
        height: 100px;
        border-radius: 2px;
        padding: 16px;
    }
}
scssコピー

Edit in: CodesandboxStackBlitz

複数レベルのドロップダウン メニュー

次のサンプルは、ユーザーが一連のネストされたメニュー上にマウスを移動することによって、コンテンツの階層をすばやく簡単に移動できるようにする複数レベルのドロップダウン メニューを実装する方法を示しています。

複数レベルのドロップダウン メニューの実装には、IgxDropDownComponent と、以下で説明するカスタム ディレクティブとサービスを使用します。

追加のドロップダウンを開くように IgxDropDownItem を構成するには、ネストされたドロップダウンの overlay settings を処理し、その innerDropdown プロパティを通じてその開閉状態を管理する multiLevel ディレクティブを追加します。

<igx-drop-down #dropdown1>
  <igx-drop-down-item [value]="'Web'" multiLevel [innerDropdown]="web">
    Web <igx-icon igxSuffix>chevron_right</igx-icon>
  </igx-drop-down-item>
  ...
</igx-drop-down>

<igx-drop-down #web>
  <igx-drop-down-item [value]="'App Builder'"> App Builder </igx-drop-down-item>
  ...
</igx-drop-down>
html

複数レベルのドロップダウンがメニューとして動作するように構成するには、階層内のすべてのドロップダウンの selectionChanging イベントを処理し、デフォルトの動作をキャンセルする必要があります。次に、選択を適切に処理するには、MultiLevelService の handleSelection メソッドを使用します。また、メニュー項目をクリックしたときにドロップダウンが閉じないようにするには、MultiLevelService の handleClosing メソッドを使用します。

@ViewChildren(IgxDropDownComponent, { read: IgxDropDownComponent })
private _dropdowns: QueryList<IgxDropDownComponent>;

@ViewChild('dropdown1', { read: IgxDropDownComponent })
private _multiLevelDropdown: IgxDropDownComponent;

constructor(private _multiLevelService: MultiLevelService) { }

public ngAfterViewInit(): void {
    this._dropdowns.forEach((dropdown) => {
        dropdown.selectionChanging.subscribe((args) => {
            args.cancel = true;
            const value = args.newSelection.value;
            const categories = this._multiLevelService.categories;

            if (categories.includes(value)) {
                this.selection = '';
                return;
            }

            if (this._multiLevelService.isMultiLevel(dropdown)) {
                this._multiLevelService.handleSelection();
            } else {
                dropdown.close();
            }

            this.selection = value;
        });
    });

    this._multiLevelDropdown.closing.subscribe((args) => {
        this._multiLevelService.handleClosing(args);
    });
}
ts

上記の構成の結果は、次のサンプルで確認できます。

EXAMPLE

最初に開いた Dropdown コンポーネントを表示するには、open メソッドを requestAnimationFrame メソッドのコールバックとして設定することをお勧めします。これにより、DOM ツリーが再描画され、すべての要素が正しく配置されるようになります。

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 igxIconButton="flat" 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>
html

// 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,
        }),
      });
    }
  }
}
typescript

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxDropDownModule,
	IgxInputGroupModule,
	IgxRippleModule,
	IgxIconModule,
	IgxToggleModule
 } from "igniteui-angular";
import { DropDownSample4Component } from "./dropdown-sample-4/dropdown-sample-4.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	DropDownSample4Component
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxDropDownModule,
	IgxInputGroupModule,
	IgxRippleModule,
	IgxIconModule,
	IgxToggleModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component, ViewChild } from '@angular/core';
import {
    ConnectedPositioningStrategy,
    IgxDropDownComponent,
    IgxInputGroupComponent
} from 'igniteui-angular';
@Component({
    // tslint:disable-next-line:component-selector
    selector: 'app-dropdown-sample-4',
    styleUrls: ['./dropdown-sample-4.component.scss'],
    templateUrl: './dropdown-sample-4.component.html'
})
export class DropDownSample4Component {
    @ViewChild(IgxDropDownComponent, { static: true }) public igxDropDown: IgxDropDownComponent;
    @ViewChild('inputGroup', { read: IgxInputGroupComponent, static: true }) public inputGroup: IgxInputGroupComponent;

    public items: { field: string }[] = [
        { field: 'Option 1' },
        { field: 'Option 2' },
        { field: 'Option 3' }
    ];

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

<igx-input-group #inputGroup [igxToggleAction]="dropDown" class="input-group">
    <input #input class="input" type="text" igxInput [igxDropDownItemNavigation]="dropDown" readonly="true"
        placeholder="Choose an option" [value]="dropDown.selectedItem?.value" (keydown.ArrowDown)="openDropDown()" />
    <igx-suffix igxButton="icon" class="dropdownToggleButton" 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]="'180px'">
    <igx-drop-down-item *ngFor="let item of items" [value]="item.field">
        {{ item.field }}
    </igx-drop-down-item>
</igx-drop-down>
htmlコピー

:host {
    margin: 8px;
}

.input {
    padding-left: 0.2rem;
}

.input-group {
    width: 180px;
}

.igx-input-group {
    display: inline-block;
}

span {
    display: inline;
    padding-left: 24px;
}
scssコピー

Edit in: CodesandboxStackBlitz

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

名前	説明
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>
html

スタイル設定

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

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

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

最も簡単な方法は、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,
);
scss

最後に、カスタム ドロップダウン テーマをクラスまたは要素セレクターに渡します。

.drop-down__scroll-container {
  @include css-vars($custom-drop-down-theme);
}
scss

デモ

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxDropDownModule,
	IgxButtonModule,
	IgxToggleModule
 } from "igniteui-angular";
import { DropDownStylingComponent } from "./data-entries/dropdown/dropdown-styling/dropdown-styling.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	DropDownStylingComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxDropDownModule,
	IgxButtonModule,
	IgxToggleModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { ISelectionEventArgs } from 'igniteui-angular';
import { getHeroClassData, IHeroClass } from '../../../data/heroData';

@Component({
    selector: 'app-dropdown-styling',
    styleUrls: ['./dropdown-styling.component.scss'],
    templateUrl: './dropdown-styling.component.html'
})
export class DropDownStylingComponent implements OnInit {
    @ViewChild('button', { static: true }) public button: ElementRef;
    public heroClasses: IHeroClass[] = [];
    public hero = 'Choose your hero';

    constructor(public elem: ElementRef) {
    }

    public ngOnInit() {
        this.heroClasses = getHeroClassData();
    }

    public handleDropDownSelection(event: ISelectionEventArgs) {
        this.hero = event.newSelection.value;
    }
}
tsコピー

<button #button class="drop-down" igxButton="raised" [igxToggleAction]="dropDown" [overlaySettings]="{outlet: elem}"
    [igxDropDownItemNavigation]="dropDown">{{ hero }}</button>
<igx-drop-down #dropDown class="drop-down" (selectionChanging)="handleDropDownSelection($event)">
    <div class="drop-down__scroll-container">
        <igx-drop-down-item-group *ngFor="let classGroup of heroClasses" [label]="classGroup['name']">
            <igx-drop-down-item *ngFor="let class of classGroup['entries']" [value]='class.name'>
                {{ class.name }}
            </igx-drop-down-item>
        </igx-drop-down-item-group>
    </div>
</igx-drop-down>
htmlコピー

@use '../../../../variables' as *;

.drop-down {
    margin: 8px;
    width: 220px;
}

.drop-down__scroll-container {
    max-height: 280px;
}

$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,
);

$custom-button-theme: button-theme(
    $background: #345779,
    $foreground: #fdfdfd,
);

:host ::ng-deep {
    @include css-vars($custom-drop-down-theme);
    @include css-vars($custom-button-theme);
}
scssコピー

Edit in: CodesandboxStackBlitz

API リファレンス

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

テーマの依存関係

• IgxOverlay テーマ

その他のリソース

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

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