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 要素を追加できます。

スタイル設定

Navigation Bar コンポーネントは、いくつかの CSS パーツ (base、start、middle および end) を公開して、スタイルを完全に制御できるようにします。

igc-icon {
    color: currentColor;
}

igc-navbar {
    background-color: #232121
}

igc-navbar::part(start) {
    color: #f23269;
}

igc-navbar::part(middle) {
    font-family: Titillium Web,sans-serif;
    color: #e9e8ea
}

igc-navbar::part(end) {
    color: #e9e8ea
}

以下は結果です:

API リファレンス

• End
• IgcIconComponent
• IgcNavbarComponent

その他のリソース

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