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
}
以下は結果です: