Web Components Navbar の概要

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

Web Components Navbar の例

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

使用方法

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

npm install igniteui-webcomponents

Navbar を使用する前に、次のように登録する必要があります:

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

defineComponents(IgcNavbarComponent);

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

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

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

コンテンツ

Navbar コンポーネントを強化するには、Icon またはその他のコンポーネントを start 位置または end 位置のコンテンツとして追加し、ユーザーがバーから直接主要な位置に移動できるようにします。

<igc-navbar>
    <igc-icon name="home" slot="start"></igc-icon>
    <h2>Sample App</h2>
    <igc-icon name="search" slot="end"></igc-icon>
    ...
</igc-navbar>

スタイル設定

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

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 リファレンス

その他のリソース

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