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
}

    以下は結果です:

    API リファレンス

    その他のリソース