Angular Navbar (ナビゲーション バー) コンポーネントの概要
Ignite UI for Angular IgxNavbarComponent は、アプリケーション内の現在位置をユーザーに通知し、ブラウザーの [戻る] ボタンのように戻る機能を提供するアプリケーション ヘッダー コンポーネントです。Navigation Bar の検索またはお気に入りなどのリンクによって、ユーザーはアプリケーションでナビゲーションをスムーズに実行できます。バーは、バーが含まれるコンテナ上に配置されます。
Angular Navbar の例
Ignite UI for Angular Navbar を使用した作業の開始
Ignite UI for Angular Navbar コンポーネントを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。
ng add igniteui-angular
Ignite UI for Angular については、「はじめに」トピックをご覧ください。
はじめに、app.module.ts ファイルに IgxNavbarModule をインポートします。
// app.module.ts
import { IgxNavbarModule } from 'igniteui-angular';
// import { IgxNavbarModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxNavbarModule],
...
})
export class AppModule {}
あるいは、16.0.0 以降、IgxNavbarComponent をスタンドアロンの依存関係としてインポートすることも、IGX_NAVBAR_DIRECTIVES トークンを使用してコンポーネントとそのすべてのサポート コンポーネントおよびディレクティブをインポートすることもできます。
// home.component.ts
import { IGX_NAVBAR_DIRECTIVES } from 'igniteui-angular';
// import { IGX_NAVBAR_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: '<igx-navbar title="Ignite UI for Angular"></igx-navbar>',
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IGX_NAVBAR_DIRECTIVES],
/* or imports: [IgxNavbarComponent] */
})
export class HomeComponent {}
Ignite UI for Angular Navbar モジュールまたはディレクティブをインポートしたので、igx-navbar コンポーネントの使用を開始できます。
Angular Navbar の使用
コンポーネントのテンプレートで、以下のコードを追加し、タイトルの基本的な NavBar を作成します。
<!--navbar.component.html-->
<igx-navbar title="Ignite UI for Angular"> </igx-navbar>
メニュー ボタンの追加
メニュー ボタンを追加するには、actionButtonIcon によってアクション ボタンを表示し、以下のようにメニュー アイコンを使用します。
<!--navbar.component.html-->
<igx-navbar title="Sample App" actionButtonIcon="menu" [isActionButtonVisible]="true"></igx-navbar>
Note
actionButtonIcon は、デザインで Material フォントセットを使用します。
アイコン ボタンの追加
検索、お気に入りなどのオプションを追加するには、IgxIconButton と IgxIcon モジュールを app.module.ts ファイルにインポートします。
// app.module.ts
...
import { IgxNavbarModule, IgxIconButtonDirective, IgxIconModule } from 'igniteui-angular';
// import { IgxNavbarModule, IgxButtonModule, IgxIconModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxIconButtonDirective, IgxIconModule],
})
export class AppModule {}
各オプションにアイコン ボタンを追加するためにテンプレートを更新します。
<!--navbar.component.html-->
<igx-navbar title="Sample App">
<button igxIconButton="flat">
<igx-icon>search</igx-icon>
</button>
<button igxIconButton="flat">
<igx-icon>favorite</igx-icon>
</button>
<button igxIconButton="flat">
<igx-icon>more_vert</igx-icon>
</button>
</igx-navbar>
以下は結果です:
カスタム動作の追加
アプリのナビゲーションでナビゲーション バーの左端にあるデフォルト アイコンではなくカスタム テンプレートを使用したい場合、igx-navbar-action ディレクティブを使用して提供したコンテンツをレンダリングします。これには Font Awesome ホーム アイコンのボタンを使用します。
/* navbar.component.css */
@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fontawesome.css");
@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-regular.css");
@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-solid.css");
<!--navbar.component.html-->
<igx-navbar title="Sample App">
<igx-navbar-action>
<button igxIconButton="flat">
<igx-icon family="fa" name="fa-home"></igx-icon>
</button>
</igx-navbar-action>
<button igxIconButton="flat">
<igx-icon>search</igx-icon>
</button>
<button igxIconButton="flat">
<igx-icon>favorite</igx-icon>
</button>
<button igxIconButton="flat">
<igx-icon>more_vert</igx-icon>
</button>
</igx-navbar>
以下はカスタム動作ボタン アイコンをした場合の navbar の外観です。
ナビゲーション アイコを追加
戻るためのアイコンが付いたナビゲーション バーを作成する場合は、次の手順を実行します。まず、actionButtonIcon プロパティを使用して、Material フォントセットから適切なアイコンを選択できます。次に、以前にアクセスしたページに戻るかどうかを確認し、その結果を isActionButtonVisible プロパティに渡します。最後の手順は、戻るためのメソッドを作成し、action プロパティにフックすることです。
<!--navbar.component.html-->
<igx-navbar
title="Ignite UI for Angular"
actionButtonIcon="arrow_back"
[isActionButtonVisible]="canGoBack()"
(action)="navigateBack()"
>
</igx-navbar>
export class NavbarSample3Component {
constructor(private _location: Location) {}
public ngOnInit() {}
public navigateBack() {
this._location.back();
}
public canGoBack() {
return window.history.length > 0;
}
}
サンプルが正しく構成された場合、ブラウザーで以下が表示されます。
Note
igx-navbar-action または igxNavbarAction が指定される場合、デフォルトの actionButtonIcon は使用されません。
カスタムのタイトルを追加する
Navbar のタイトルにカスタム コンテンツを提供する場合は、igx-navbar-title または igxNavbarTitle ディレクティブを使用ます。これらは、title 入力プロパティによって提供されるデフォルトの navbar のタイトルを置き換えます。以下のサンプルには、画像付きのリンクを含むカスタム タイトルがあります。
<!--navbar.component.html-->
<div class="sample-column">
<igx-navbar>
<igx-navbar-action>
<button igxIconButton="flat">
<igx-icon>menu</igx-icon>
</button>
</igx-navbar-action>
<div igxNavbarTitle>
<a href="https://www.infragistics.com/products/ignite-ui-angular" target="_blank">
<img
src="https://static.infragistics.com/marketing/Website/products/ignite-ui-landing/ignite-ui-logo.svg"
width="120px"
height="50px"
alt
style="margin-top: 7px;"
/>
</a>
</div>
<button igxIconButton="flat">
<igx-icon>search</igx-icon>
</button>
<button igxIconButton="flat">
<igx-icon>favorite</igx-icon>
</button>
<button igxIconButton="flat">
<igx-icon>more_vert</igx-icon>
</button>
</igx-navbar>
</div>
Note
igx-navbar-title または igxNavbarTitle の場合、デフォルト title が使用されません。
スタイル設定
ページネーターのスタイル設定を始めるには、すべてのテーマ関数とコンポーネントミックスインが存在する index ファイルをインポートする必要があります。
@use "igniteui-angular/theming" as *;
// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';
最も簡単な方法は、navbar-theme を拡張する新しいテーマを作成し、$text-color、$background、$idle-icon-color、$hover-icon-color パラメーターを受け取る方法です。
$custom-navbar-theme: navbar-theme(
$text-color: #151515,
$background: #dedede,
$idle-icon-color: #151515,
$hover-icon-color: #8c8c8c,
);
Note
上記のようにカラーの値をハードコーディングする代わりに、palette および color 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細についてはパレットのトピックをご覧ください。
最後に、新しく作成されたテーマを css-vars ミックスインに渡します。
@include css-vars($custom-navbar-theme);
デモ
API リファレンス
その他のコンポーネントおよびディレクティブ (またはそのいずれか) で使用した API:
テーマの依存関係
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。
GitHub