Blazor Navbar | Infragistics

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

다음 예는 아이콘과 텍스트 헤더가 있는 IgbNavbar 나타냅니다.

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에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

용법

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

콘텐츠

일부를 추가할 수 있습니다. IgbIcon를 사용하는 요소 Start 그리고 End 슬롯 IgbNavbar 다음 샘플에 표시된 대로:

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

스타일링

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

모든 것이 순조롭게 진행되면 브라우저에 다음이 표시됩니다.

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

Blazor Navbar 개요

Blazor Navbar 예시

용법

콘텐츠

스타일링

API 참조

추가 리소스