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
);
CSS 変数の使用
最後にコンポーネントのテーマを渡します。
@include css-vars($custom-navbar-theme);
ミックスインの使用
Internet Explorer 11 などの古いブラウザーのコンポーネントをスタイル設定するには、CSS 変数をサポートしていないため、別のアプローチを用いる必要があります。
コンポーネントが Emulated ViewEncapsulation を使用している場合、::ng-deep を使用してこのカプセル化を解除する必要があります。カスタム テーマが他のコンポーネントに影響しないようにするには、::ng-deep の前に :host セレクターを含めるようにしてください。
:host {
::ng-deep {
// Custom navbar theme を `igx-navbar` ミックスインに渡します
@include navbar($custom-navbar-theme);
}
}
カラー パレットの使用
上記のように色の値をハードコーディングする代わりに、igx-palette および igx-color 関数を使用して色に関してより高い柔軟性を実現することができます。
igx-palette は渡された一次色と二次色に基づいてカラーパレットを生成します。
$white-color: #dedede;
$black-color: #151515;
$light-navbar-palette: palette($primary: $white-color, $secondary: $black-color);
igx-color を使用して、パレットから簡単に取得することができます。
$custom-navbar-theme: navbar-theme(
$text-color: color($light-navbar-palette, "secondary", 400),
$background: color($light-navbar-palette, "primary", 400),
$idle-icon-color: color($light-navbar-palette, "secondary", 400),
$hover-icon-color: #8c8c8c
);
Note
igx-color および igx-palette は、色を生成および取得するための重要な機能です。使い方の詳細についてはパレットのトピックを参照してください。
スキーマの使用
スキーマの利点を活用でき、堅牢で柔軟な構造を構築できます。スキーマはテーマを使用する方法です。
すべてのコンポーネントに提供されている 2 つの定義済みスキーマ (ここでは light-navbar) の 1 つを拡張します。
// Extending the navbar schema
$light-navbar-schema: extend($_light-navbar,
(
text-color: (
color: ("secondary", 400)
),
background: (
color: ("primary", 400)
),
idle-icon-color:(
color: ("secondary", 400)
),
$hover-icon-color: #8c8c8c
)
);
カスタム スキーマを適用するには、グローバル (light または dark) の 1 つを拡張する必要があります。これは基本的にカスタム スキーマでコンポーネントを指し示し、その後それぞれのコンポーネント テーマに追加するものです。
// Extending the global light-schema
$custom-light-schema: extend($light-schema,(
igx-navbar: $light-navbar-schema
));
// Defining navbar with the global light schema
$cutom-navbar-theme: navbar-theme(
$palette: $light-navbar-palette,
$schema: $custom-light-schema
);
上記と同じ方法でテーマを含める必要があることに注意してください。
デモ
API リファレンス
その他のコンポーネントおよびディレクティブ (またはそのいずれか) で使用した API:
テーマの依存関係
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。
GitHub