Navbar

Ignite UI for Angular IgxNavbarComponent、アプリケーション内の現在位置を示し、ブラウザーの [戻る] ボタンのように戻る機能を提供します。Navigation Bar の検索またはお気に入りなどのリンクによって、ユーザーはアプリケーションでナビゲーションをスムーズに実行できます。バーは、バーが含まれるコンテナ上に配置されます。

Angular Navbar の例

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

使用方法

Navbar コンポーネントを初期化する前に、IgxNavbarModuleapp.module.ts ファイルにインポートします。

// app.module.ts

...
import { IgxNavbarModule } from 'igniteui-angular';

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

コンポーネントのテンプレートで、以下のコードを追加し、タイトルのみのベーシックな 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 フォントセットを使用します。

アイコンの追加

アプリケーションのメニューを実装した後、検索、お気に入りなどのオプションを追加できます。要素を追加するには、IgxIcon モジュールを app.module.ts ファイルにインポートします。

// app.module.ts

...
import {
    IgxNavbarModule,
    IgxIconModule
} from 'igniteui-angular';

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

各オプションにアイコンを追加するためにテンプレートを更新します。

<!--navbar.component.html-->

 <igx-navbar title="Sample App" actionButtonIcon="menu" [isActionButtonVisible]="true">
    <igx-icon>search</igx-icon>
    <igx-icon>favorite</igx-icon>
    <igx-icon>more_vert</igx-icon>
</igx-navbar>

以下は結果です:

カスタム アクション アイコンの追加

アプリのナビゲーションでナビゲーション バーの左端にあるデフォルト アイコンではなくカスタム アクション アイコンを使用したい場合、igx-navbar-action ディレクティブを使用してデフォルトの操作アイコンをコンテンツで置き換えます。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");

.customIcon {
    vertical-align: middle;
}
<!--navbar.component.html-->

 <igx-navbar title="Sample App" actionButtonIcon="menu" [isActionButtonVisible]="true">
    <igx-icon>search</igx-icon>
    <igx-icon>favorite</igx-icon>
    <igx-icon>more_vert</igx-icon>

    <igx-navbar-action>
        <igx-icon class="customIcon" fontSet="fa" name="fa-home"></igx-icon>
    </igx-navbar-action>
</igx-navbar>
Note

igx-navbar-action または igxNavbarAction の場合、デフォルト actionButtonIcon が使用されません。

以下はカスタム アクション アイコンをした場合の navbar の外観です。

ナビゲーション アイコを追加

戻るためのアイコンが付いたナビゲーション バーを作成する場合は、次の手順を実行します。まず、actionButtonIcon プロパティを使用して、Material フォントセットから適切なアイコンを選択できます。次に、以前にアクセスしたページに戻るかどうかを確認し、その結果を isActionButtonVisible プロパティに渡します。最後の手順は、戻るためのメソッドを作成し、onAction プロパティにフックすることです。

<!--navbar.component.html-->

<igx-navbar title="Ignite UI for Angular" 
    actionButtonIcon="arrow_back" 
    [isActionButtonVisible]="canGoBack()" 
    (onAction)="navigateBack()">
</igx-navbar>
export class NavbarSample3Component {

  constructor(private _location: Location) { }

  public ngOnInit() {  }

  public navigateBack() {
    this._location.back();
  }

  public canGoBack() {
      return window.history.length > 0;
  }
}

サンプルが正しく構成された場合、ブラウザーで以下が表示されます。

カスタムのタイトルを追加する

Navbar のタイトルにカスタム コンテンツを提供する場合は、igx-navbar-title または igxNavbarTitle ディレクティブを使用ます。これらは、title 入力プロパティによって提供されるデフォルトの navbar のタイトルを置き換えます。以下のサンプルには、画像付きのリンクを含むカスタム タイトルがあります。

<!--navbar.component.html-->

<div class="sample-column">
    <igx-navbar actionButtonIcon="menu" [isActionButtonVisible]="true">
        <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>

        <igx-icon>search</igx-icon>
        <igx-icon>favorite</igx-icon>
        <igx-icon>more_vert</igx-icon>
    </igx-navbar>
</div>
Note

igx-navbar-title または igxNavbarTitle の場合、デフォルト title が使用されません。

スタイル設定

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

@import '~igniteui-angular/lib/core/styles/themes/index';

最も簡単な方法は、igx-navbar-theme を拡張する新しいテーマを作成し、$text-color$background$idle-icon-color$hover-icon-color パラメーターを受け取る方法です。

$custom-navbar-theme: igx-navbar-theme(
    $text-color: #151515,
    $background: #dedede,
    $idle-icon-color: #151515,
    $hover-icon-color: #8c8c8c
);

CSS 変数の使用

最後にコンポーネントのテーマを渡します。

@include igx-css-vars($custom-navbar-theme);

ミックスインの使用

Internet Explorer 11 などの古いブラウザーのコンポーネントをスタイル設定するには、CSS 変数をサポートしていないため、別のアプローチを用いる必要があります。

コンポーネントが Emulated ViewEncapsulation を使用している場合、::ng-deep を使用してこのカプセル化を解除する必要があります。カスタム テーマが他のコンポーネントに影響しないようにするには、::ng-deep の前に :host セレクターを含めるようにしてください。

:host {
    ::ng-deep {
        // Pass the custom navbar theme to the `igx-navbar` mixin
        @include igx-navbar($custom-navbar-theme);
    }
}

カラー パレットの使用

上記のように色の値をハードコーディングする代わりに、igx-palette および igx-color 関数を使用して色に関してより高い柔軟性を実現することができます。

igx-palette は渡された一次色と二次色に基づいてカラーパレットを生成します。

$white-color: #dedede;
$black-color: #151515;
$light-navbar-palette: igx-palette($primary: $white-color, $secondary: $black-color);

igx-color を使用して、パレットから簡単に取得することができます。

$custom-navbar-theme: igx-navbar-theme(
    $text-color: igx-color($light-navbar-palette, "secondary", 400),
    $background: igx-color($light-navbar-palette, "primary", 400),
    $idle-icon-color: igx-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: (
            igx-color: ("secondary", 400)
        ),
        background: (
            igx-color: ("primary", 400)
        ),
        idle-icon-color:(
            igx-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: igx-navbar-theme(
  $palette: $light-navbar-palette,
  $schema: $custom-light-schema
);

上記と同じ方法でテーマを含める必要があることに注意してください。

デモ

API リファレンス

その他のコンポーネントおよびディレクティブ (またはそのいずれか) で使用した API:

その他のリソース

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