Blazor Navbar の概要

Blazor IgbNavbar は、アプリ内の現在の位置をユーザーに通知します。ナビゲーション バーは、検索やお気に入りなどのクイック アクションへのリンクを提供することもでき、ユーザーが無効なルートや状態に移動しようとせずに、アプリケーション内をスムーズにナビゲートできるようにします。ナビゲーション バーは、それが配置されているコンテナの上部にあります。

Blazor Navbar の例

次の例は、アイコンとテキスト ヘッダーのある IgbNavbar を表しています:

EXAMPLE

MODULES

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbNavbarModule),
                typeof(IgbIconModule)
  );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <IgbNavbar style="height:4rem">
        <IgbIcon @ref="@HomeIcon" slot="start" IconName="home" Collection="material" />
        <h3>Sample App</h3>
        <IgbIcon @ref="@SearchIcon" slot="end" IconName="search" Collection="material" />
        <IgbIcon @ref="@FavoriteIcon" slot="end" IconName="favorite" Collection="material" />
        <IgbIcon @ref="@MoreVertIcon" slot="end" IconName="more_vert" Collection="material" />
    </IgbNavbar>
</div>

@code {
    

    public IgbIcon HomeIcon { get; set; }
    public IgbIcon SearchIcon { get; set; }
    public IgbIcon FavoriteIcon { get; set; }
    public IgbIcon MoreVertIcon { get; set; }

    protected override void OnAfterRender(bool firstRender)
    {
        if(this.HomeIcon != null && firstRender)
        {
            this.HomeIcon.EnsureReady().ContinueWith(new Action<Task>((e) =>
            {
                this.HomeIcon.RegisterIconFromText("home",
                    "<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='#000000'><path d='M0 0h24v24H0z' fill='none' /><path d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z' /></svg>",
                    "material");
            }));
        }

        if (this.SearchIcon != null && firstRender)
        {
            this.SearchIcon.EnsureReady().ContinueWith(new Action<Task>((e) =>
            {
                this.SearchIcon.RegisterIconFromText("search",
                    "<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='#000000'><path d='M0 0h24v24H0z' fill='none'/><path d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/></svg>",
                    "material");
            }));
        }

        if (this.FavoriteIcon != null && firstRender)
        {
            this.FavoriteIcon.EnsureReady().ContinueWith(new Action<Task>((e) =>
            {
                this.FavoriteIcon.RegisterIconFromText("favorite",
                    "<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='#000000'><path d='M0 0h24v24H0z' fill='none'/><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/></svg>",
                    "material");
            }));
        }

        if (this.MoreVertIcon != null && firstRender)
        {
            this.MoreVertIcon.EnsureReady().ContinueWith(new Action<Task>((e) =>
            {
                this.MoreVertIcon.RegisterIconFromText("more_vert",
                    "<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='#000000'><path d='M0 0h24v24H0z' fill='none'/><path d='M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'/></svg>",
                    "material");
            }));
        }
    }
}razorコピー

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/cssコピー

このサンプルが気に入りましたか? 完全な Ignite UI for Blazorツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

最速のデータ グリッド、高性能なチャート、すぐに使用できる機能のフルセットなどを含む 60 以上の再利用可能なコンポーネント を使用して、最新の Web エクスペリエンスを構築します。

無料で試してみる

使用方法

IgbNavbar を使用する前に、次のように登録する必要があります:

// in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbNavbarModule));
razor

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" />
razor

次に、IgbNavbar のテンプレートに次のコードを追加して、タイトルのみの基本的な IgbNavbar を表示できます。

<IgbNavbar>Navigation Title</IgbNavbar>
razor

コンテンツ

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>
Razor

スタイル設定

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

以下は結果です:

EXAMPLE

MODULES

RAZOR

index.css

NavbarStyling.css

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbNavbarModule),
                typeof(IgbIconModule)
  );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<style>
igc-icon {
    color: currentColor;
}

igc-navbar {
    background-color: gainsboro;
}

igc-navbar::part(start) {
    color: darkolivegreen;
}

igc-navbar::part(middle) {
    font-family: Titillium Web,sans-serif;
}

igc-navbar::part(end) {
    color: darkgray;
}
</style>
<div class="container vertical">
    <style>
        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
        }
    </style>

    <IgbNavbar style="height: 4rem;">
        <IgbIcon @ref="@HomeIcon" slot="start" IconName="home" Collection="material" />
        <h3>Sample App</h3>
        <IgbIcon @ref="@SearchIcon" slot="end" IconName="search" Collection="material" />
        <IgbIcon @ref="@FavoriteIcon" slot="end" IconName="favorite" Collection="material" />
        <IgbIcon @ref="@MoreVertIcon" slot="end" IconName="more_vert" Collection="material" />
    </IgbNavbar>
</div>

@code {
    

    public IgbIcon HomeIcon { get; set; }
    public IgbIcon SearchIcon { get; set; }
    public IgbIcon FavoriteIcon { get; set; }
    public IgbIcon MoreVertIcon { get; set; }

    protected override void OnAfterRender(bool firstRender)
    {
        if (this.HomeIcon != null && firstRender)
        {
            this.HomeIcon.EnsureReady().ContinueWith(new Action<Task>((e) =>
            {
                this.HomeIcon.RegisterIconFromText("home",
                    "<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px'><path d='M0 0h24v24H0z' fill='none' /><path d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z' /></svg>",
                    "material");
            }));
        }

        if (this.SearchIcon != null && firstRender)
        {
            this.SearchIcon.EnsureReady().ContinueWith(new Action<Task>((e) =>
            {
                this.SearchIcon.RegisterIconFromText("search",
                    "<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px'><path d='M0 0h24v24H0z' fill='none'/><path d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/></svg>",
                    "material");
            }));
        }

        if (this.FavoriteIcon != null && firstRender)
        {
            this.FavoriteIcon.EnsureReady().ContinueWith(new Action<Task>((e) =>
            {
                this.FavoriteIcon.RegisterIconFromText("favorite",
                    "<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px'><path d='M0 0h24v24H0z' fill='none'/><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/></svg>",
                    "material");
            }));
        }

        if (this.MoreVertIcon != null && firstRender)
        {
            this.MoreVertIcon.EnsureReady().ContinueWith(new Action<Task>((e) =>
            {
                this.MoreVertIcon.RegisterIconFromText("more_vert",
                    "<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px'><path d='M0 0h24v24H0z' fill='none'/><path d='M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'/></svg>",
                    "material");
            }));
        }
    }
}razorコピー

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/cssコピー

igc-icon {
    color: currentColor;
}

igc-navbar {
    background-color: gainsboro;
}

igc-navbar::part(start) {
    color: darkolivegreen;
}

igc-navbar::part(middle) {
    font-family: Titillium Web,sans-serif;
}

igc-navbar::part(end) {
    color: darkgray;
}
cssコピー

API リファレンス

• IgbIcon
• IgbNavbar
• スタイル設定 & テーマ

その他のリソース

• Ignite UI for Blazor フォーラム (英語)
• Ignite UI for Blazor GitHub (英語)