Blazor Navbar 개요

Ignite UI for Blazor는 사용자에게 앱에서의 현재 위치를 알려줍니다. Navigation Bar는 검색이나 즐겨찾기와 같은 빠른 작업에 대한 링크도 제공하여 사용자가 잘못된 경로나 상태로 이동하지 않고도 애플리케이션을 원활하게 탐색할 수 있도록 도와줍니다. 이 바는 배치된 컨테이너의 맨 위에 있습니다.

Blazor Navbar Example

다음 예는 아이콘과 텍스트 헤더가 있는 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コピー

Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.

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

無料で試してみる

Usage

​IgbNavbar 사용하기 전에 다음과 같이 등록해야 합니다.

// in Program.cs file

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

Ignite UI for Blazor에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

​IgbNavbar 구성 요소에 스타일을 적용하려면 추가 CSS 파일을 연결해야 합니다. 다음은 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

Content

시작 또는 끝 위치에 다른 구성 요소를 콘텐츠로 추가하여 IgbIcon 구성 요소를 향상시킬 IgbNavbar 수 있으며, 이를 통해 사용자가 막대에서 직접 주요 위치로 이동할 수 있습니다.

<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

Styling

구성 요소는 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 References

• IgbIcon
• IgbNavbar
• Styling & Themes

Additional Resources

• Ignite UI for Blazor 포럼
• Ignite UI for Blazor 깃허브