Angular Navigation Drawer (ナビゲーション ドロワー) コンポーネントの概要

Angular Navigation Drawer の例

Ignite UI for Angular Navigation Drawer を使用した作業の開始

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

ng add igniteui-angular

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

はじめに、app.module.ts ファイルに IgxNavigationDrawerModule をインポートします。

// app.module.ts
...
import { HammerModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IgxNavigationDrawerModule } from 'igniteui-angular/navigation-drawer';
// import { IgxNavigationDrawerModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., BrowserAnimationsModule, HammerModule, IgxNavigationDrawerModule],
    ...
})
export class AppModule {}

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

// home.component.ts

import { HammerModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgFor } from '@angular/common';
import { IGX_NAVIGATION_DRAWER_DIRECTIVES } from 'igniteui-angular/navigation-drawer';
import { IgxRippleDirective } from 'igniteui-angular/directives';
import { IgxIconComponent } from 'igniteui-angular/icon';
// import { IGX_NAVIGATION_DRAWER_DIRECTIVES, IgxRippleDirective, IgxIconComponent } from '@infragistics/igniteui-angular'; for licensed package

@Component({
  selector: 'app-home',
  template: `
    <div class="content-wrap">
      <igx-nav-drawer [isOpen]="true">
        <ng-template igxDrawer>
            <span igxDrawerItem [isHeader]="true">Components</span>
            <span
              *ngFor="let item of navItems"
              igxDrawerItem
              [active]="item.text === selected"
              igxRipple
              (click)="navigate(item)"
            >
              <igx-icon fontSet="material">{{ item.name }}</igx-icon>
              <span>{{ item.text }}</span>
            </span>
        </ng-template>
      </igx-nav-drawer>
      <main>
        <!-- app content -->
      </main>
    </div>
  `,
  styleUrls: ['home.component.scss'],
  standalone: true,
  imports: [BrowserAnimationsModule, HammerModule, IGX_NAVIGATION_DRAWER_DIRECTIVES, IgxRippleDirective, IgxIconComponent, NgFor],
  /* or imports: [BrowserAnimationsModule, HammerModule, IgxNavigationDrawerComponent, IgxNavDrawerTemplateDirective, IgxNavDrawerItemDirective, IgxIconComponent, IgxRippleDirective, NgFor] */
})
export class HomeComponent {
  public navItems: Product[];
}

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

Angular Navigation Drawer の使用

依存関係をインポートした後、Navigation Drawer をコンポーネントのテンプレートで定義できます。

<igx-nav-drawer id="navdrawer" [isOpen]="true">
  <!-- template(s) -->
</igx-nav-drawer>

Drawer のコンテンツを igxDrawer ディレクティブでデコレートした <ng-template> で設定します。 任意のコンテンツをテンプレートに設定できますが、IgxNavDrawerItemDirective ディレクティブ (項目のスタイルを参照) が定義済みのスタイル設定を項目に適用します。 このディレクティブに 2 つの @Input プロパティがあります。

• active - 項目を選択済みとしてスタイル設定します。
• isHeader - 項目をグループ ヘッダーとしてスタイル設定します。active に設定できません。

igxRipple ディレクティブは使用感を向上します。

<!-- app.component.html -->
<div class="content-wrap">
  <igx-nav-drawer id="navigation" #drawer [isOpen]="true">
    <ng-template igxDrawer>
        <span igxDrawerItem [isHeader]="true">Components</span>
        <span *ngFor="let item of navItems" igxDrawerItem [active]="item.text === selected" igxRipple (click)="navigate(item)">
          <igx-icon fontSet="material">{{ item.name }}</igx-icon>
          <span>{{ item.text }}</span>
        </span>
    </ng-template>
  </igx-nav-drawer>
  <main>
    <!-- app content -->
  </main>
</div>

igxDrawerMini ディレクティブでデコレートした追加のテンプレートを閉じた状態の代わりの Mini バリアントとして提供できます。

/* app.component.css */
.content-wrap {
  width: 100%;
  height: 100%;
  display: flex;
}

モードの間に切り替えるため、2 つのコンテンツ セクションの周りに簡易なラッパーを以下のようにスタイルできます。

/* app.component.ts */
@Component({...})
export class AppComponent {
    public navItems = [
        { name: 'account_circle', text: 'Avatar' },
        ...
    ];

    public selected = 'Avatar';

    public navigate(item) {
        this.selected = item.text;
    }
}

Navigation drawer に要素を追加して選択するためには、typescript ファイルを次のようにします。

<button (click)="drawer.toggle()">Menu</button>

Drawer を開く/閉じる方法が複数あります。入力プロパティをアプリケーション状態にバインドするか、@ViewChild(IgxNavigationDrawerComponent) 参照を使用してコンポーネントの API へコードでアクセス、あるいはこのような場合では #drawer テンプレート参照変数を使用できます。

Navigation Drawer は IgxNavigationService とも統合し、igxToggleAction ディレクティブで id によって対象にされます。

<main>
  <span igxIconButton="flat" igxToggleAction="navigation">
    <igx-icon fontSet="material">menu</igx-icon>
  </span>
</main>

app.component.html の <main> を以下のコードと置き換えます。トグルをスタイル設定するために igxIconButton および Icon コンポーネントを追加します。

/* app.component.ts */
import { Component, ViewChild } from '@angular/core';
import { IgxNavigationDrawerComponent } from 'igniteui-angular/navigation-drawer';
// import { IgxNavigationDrawerComponent } from '@infragistics/igniteui-angular'; for licensed package

@Component({...})
export class AppComponent  {
    @ViewChild(IgxNavigationDrawerComponent, { static: true })
    public drawer: IgxNavigationDrawerComponent;

    // And of course add the key line to our navigate function

    public navigate(item) {
        this.selected = item.text;
        this.drawer.close();
    }
}

また、ドロワーから項目を選択した際にドロワーを閉じる場合は、次のように @ViewChild(IgxNavigationDrawerComponent) 参照を使用できます。

モード

ピン固定されていないモード (コンテンツの上に配置) は標準の動作です。Drawer は上に配置され、すべてのコンテンツの上に暗いオーバーレイを適用します。モバイル デバイスで使用される一時的なナビゲーションを提供するために使用されます。

より大きい画面に Drawer をピン固定すると、相対的な位置を使用して通常のコンテンツ フローで配置されます。アプリケーションに Drawer を切り替える方法を提供するかどうかにより、ピン固定モードを使用して、確定または永続的な動作を実装できます。

ピン固定 (persistent) モード

ピン固定は、コンテンツと同じフローに配置するために、Drawer の位置を fixed から relative に変更します。従って、このモードで Drawer を切り替える必要がある場合、アプリケーションのスタイル設定を切り替えるためにレイアウトをデザインする必要があります。流動レイアウトを実装するには、igxLayout および igxFlex ディレクティブを使用します。

上記の例に適用すると以下のようになります。

<div class="content-wrap" igxLayout igxLayoutDir="row">
  <igx-nav-drawer id="navigation" #drawer [isOpen]="true" [pin]="true" [pinThreshold]="0">
    <!-- template(s) -->
  </igx-nav-drawer>
  <main igxFlex>
    <!-- content here -->
  </main>
</div>

.content-wrap {
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

結果は以下のようになります。

Drawer は flex-basis をホスト要素に適用すると、残りのコンテンツが残りの幅に合わせます。 代わりに、ディレクティブを使用せずに以下の手動的なスタイルを適用できます。

.main {
  position: absolute;
  display: flex;
  flex-flow: row nowrap;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
}

.main > * {
  width: 100%;
}

ミニ バリアント

ミニ バリアントを使用する場合、Navigation Drawer を閉じる代わりに幅を変更します。 サイドでクイック選択を利用可能にするためにアイコンが常に表示されます。 このバリアントを使用するには、igxDrawerMini ディレクティブでデコレートしたミニ テンプレートを設定します。

通常、ミニ バリアントが persistent セットアップで使用されるため、pin を設定し、レスポンシブしきい値を無効にしました。

<igx-nav-drawer id="navigation" [pin]="true" [pinThreshold]="0">
  <ng-template igxDrawer>
    <span *ngFor="let item of navItems" igxDrawerItem [active]="item.text === selected" igxRipple (click)="navigate(item)">
      <igx-icon fontSet="material">{{ item.name }}</igx-icon>
      <span>{{ item.text }}</span>
    </span>
  </ng-template>
  <ng-template igxDrawerMini>
    <span *ngFor="let item of navItems" igxDrawerItem [active]="item.text === selected" igxRipple (click)="navigate(item)">
      <igx-icon fontSet="material">{{ item.name }}</igx-icon>
    </span>
  </ng-template>
</igx-nav-drawer>

Angular Router の使用

Angular Router を使用するには、最初に @angular/router から git をインポートし、コンストラクターでルーターのインスタンスを作成する必要があります。次に、リンク値にルーターを使用して、ナビゲーション項目を定義します。

/* app.component.ts */
 ...

export class AppComponent {
    public componentLinks = [
        {
            link: 'avatar',
            name: 'Avatar'
        },
        {
            link: 'badge',
            name: 'Badge'
        },
        {
            link: 'button-group',
            name: 'Button Group'
        }
    ];
}

テンプレート変数に割り当てられている routerLinkActive を使用でき、その isActive プロパティを使用して、igxDrawerItem の active 入力にバインドできます。<igx-nav-drawer> テンプレートは以下のようになります。

/* app.component.html */

<!-- ... -->
<ng-template igxDrawer>
    <span igxDrawerItem [isHeader]="true">Components</span>

    <span
      *ngFor="let item of componentLinks"
      routerLink="{{item.link}}"
      routerLinkActive
      #rla="routerLinkActive"
      igxDrawerItem
      igxRipple
      [active]="rla.isActive">
       {{item.name}}
    </span>
</ng-template>
<!-- ... -->

最後に、app.module.ts ファイルに項目のルートと共に RouterModule をインポートします。

/*app.module.ts*/
import { RouterModule } from '@angular/router';

@NgModule([
    imports: [
        RouterModule,
  RouterModule.forRoot([
            {path: 'avatar', component: NavDrawerRoutingComponent},
            {path: 'badge', component: NavDrawerRoutingComponent},
            {path: 'button-group', component: NavDrawerRoutingComponent}
        ])
    ]
])

上記の手順が完了した後に、アプリは以下のようになります。

階層ナビゲーション

IgxNavigationDrawerComponent を使用してマルチレベル階層ナビゲーションを作成するには、igxDrawer テンプレートの IgxTreeComponent を使用できます。ツリーはアプリケーションの Routes オブジェクトから直接作成できます。以下はその方法です。

<igx-nav-drawer [isOpen]="true" [enableGestures]="true" width="280px">
  <ng-template igxDrawer>
    <igx-tree>
      <igx-tree-node *ngFor="let route of routes">
        <a igxTreeNodeLink [routerLink]="route.path" routerLinkActive="route-selected-class">{{ route.data?.displayName }}</a>
        <igx-tree-node *ngFor="let child of route.children">
          <a igxTreeNodeLink [routerLink]="[route.path, child.path]" routerLinkActive="route-selected-class">{{ child.data?.displayName }}</a>
        </igx-tree-node>
      </igx-tree-node>
    </igx-tree>
  </ng-template>
</igx-nav-drawer>

import { menusRoutes } from '../../menus-routing.module';

@Component({
  selector: 'app-nav-drawer-hierarchical',
  templateUrl: './nav-drawer-hierarchical.component.html',
  styleUrls: ['./nav-drawer-hierarchical.component.scss'],
})
export class NavDrawerHierarchicalComponent {
  public routes = menusRoutes;
}

この例では、igx-tree ノードでリンク テキストを可視化するために使用される displayName プロパティを含むカスタム ルーティング data でルートを生成します。以下は Route の例です。

export const menusRoutes: Routes = [
  {
    component: NavDrawerHierarchicalComponent,
    path: 'navigation-drawer-hierarchical',
    data: { displayName: 'Hierarchical Drawer Menu' },
  },
];

ルートの children プロパティから抽出された子ルーティングもあります。このサンプルは 2 つの階層レベルを示していますが、ルーティングに複数の階層がある場合は、ツリー ノード テンプレートで 2 番目の下のレベルを定義するだけです。

以下の例は、トピック名とリンクを含む定義済みデータを使用して、階層構造の機能を示しています。この構造により、ユーザーは機能的で詳細なナビゲーションを簡単に生成し、各要素をリンクとして表示するかインジケーターとして表示するかを定義することができます。

スタイル設定

Navigation drawer のスタイル設定を始めるには、すべてのテーマ関数とコンポーネント ミックスインが存在する index ファイルをインポートする必要があります。

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

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

最も簡単な方法は、navdrawer-theme を拡張する新しいテーマを作成し、navdrawer の項目をスタイル設定するいくつかのパラメーターを受け取る方法です。

$custom-theme: navdrawer-theme(
  $background: #2d313a,
  $item-active-background: #ecc256,
  $item-header-text-color: #ecc256,
);

ご覧のとおり、navdrawer-theme は、アイテムの基本的なスタイル設定に役立ついくつかのパラメーターを公開しています。

最後にコンポーネントのテーマをアプリケーションに含めます。

:host {
  @include tokens($custom-theme);
}

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

API とスタイル リファレンス

• NavigationDrawer
• IgxNavigationDrawerComponent スタイル