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

    スタイル設定

    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);;
}

    以下は結果です:

    API リファレンス

    その他のリソース