Blazor Navbar の概要
Blazor IgbNavbar
は、アプリ内の現在の位置をユーザーに通知します。ナビゲーション バーは、検索やお気に入りなどのクイック アクションへのリンクを提供することもでき、ユーザーが無効なルートや状態に移動しようとせずに、アプリケーション内をスムーズにナビゲートできるようにします。ナビゲーション バーは、それが配置されているコンテナの上部にあります。
Blazor Navbar の例
次の例は、アイコンとテキスト ヘッダーのある IgbNavbar
を表しています:
使用方法
IgbNavbar
を使用する前に、次のように登録する必要があります:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbNavbarModule));
Ignite UI for Blazor の完全な概要については、作業の開始トピックを参照してください。
また、追加の CSS ファイルをリンクして、スタイルを IgbNavbar
コンポーネントに適用する必要があります。以下は、Blazor Web Assembly プロジェクトの wwwroot/index.html ファイルまたは Blazor Server プロジェクトの Pages/_Host.cshtml ファイルに配置する必要があります:
<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
次に、IgbNavbar
のテンプレートに次のコードを追加して、タイトルのみの基本的な IgbNavbar
を表示できます。
<IgbNavbar>Navigation Title</IgbNavbar>
コンテンツ
次のサンプルに示すように、Start
スロットと End
スロットを使用して IgbNavbar
にいくつかの IgbIcon
要素を追加できます。
スタイル設定
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
}
以下は結果です: