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>
コンテンツ
IgbNavbar コンポーネントを強化するには、IgbIcon またはその他のコンポーネントを start 位置または end 位置のコンテンツとして追加し、ユーザーがバーから直接主要な位置に移動できるようにします。
<IgbNavbar>
<IgbIcon @ref="@HomeIcon" slot="start" IconName="home" Collection="material" />
<h3>Sample App</h3>
<IgbIcon @ref="@SearchIcon" slot="end" IconName="search" Collection="material" />
...
</IgbNavbar>
スタイル設定
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);;
}
以下は結果です: