Web Components Navbar の概要

Web Components IgcNavbarComponent は、アプリ内の現在の位置をユーザーに通知します。ナビゲーション バーは、検索やお気に入りなどのクイック アクションへのリンクを提供することもでき、ユーザーが無効なルートや状態に移動しようとせずに、アプリケーション内をスムーズにナビゲートできるようにします。ナビゲーション バーは、それが配置されているコンテナの上部にあります。

Web Components Navbar の例

次の例は、アイコンとテキスト ヘッダーのある IgcNavbarComponent を表しています:

使用方法

まず、次のコマンドを実行して Ignite UI for Web Components をインストールする必要があります。

npm install igniteui-webcomponents

import { defineComponents, IgcNavbarComponent } from 'igniteui-webcomponents';

defineComponents(IgcNavbarComponent);

Ignite UI for Web Components の完全な概要については、作業の開始トピックを参照してください。

次に、IgcNavbarComponent のテンプレートに次のコードを追加して、タイトルのみの基本的な IgcNavbarComponent を表示できます。

<igc-navbar>Navigation Title</igc-navbar>

コンテンツ

次のサンプルに示すように、Start スロットと End スロットを使用して IgcNavbarComponent にいくつかの IgcIconComponent 要素を追加できます。

スタイル設定

NavBar コンポーネントはいくつかの CSS パーツを公開し、スタイルを完全に制御できるようにします。

名前	説明
base	タナビゲーション バーの基本ラッパー。
start	左揃えのアイコン コンテナー。
middle	ナビゲーション バーのタイトル コンテナー。
end	右揃えのアクション アイコン コンテナー。

igc-icon {
  color: var(--ig-primary-500);
}

igc-navbar {
  background-color: var(--ig-secondary-200);
}

igc-navbar::part(middle) {
  font-family: Titillium Web, sans-serif;
  color: var(--ig-primary-500);;
}

以下は結果です:

API リファレンス

• IgcIconComponent
• IgcNavbarComponent
• スタイル設定 & テーマ

その他のリソース

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