Blazor NavDrawer | Infragistics

Ignite UI for Blazor 콘텐츠 내에서 확장하거나 축소할 수 있는 측면 탐색을 제공합니다. 미니 버전은 닫혀 있어도 탐색에 빠르게 액세스할 수 있습니다. 콘텐츠는 완전히 사용자 정의할 수 있으며 기본 메뉴 항목 스타일도 제공합니다.

이 샘플은 IgbNavDrawer 구성 요소를 만드는 방법을 보여줍니다.

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(IgbNavDrawerModule),
                typeof(IgbNavDrawerHeaderItemModule),
                typeof(IgbIconModule)
   );
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<style>
igc-icon-button::part(base):hover {
background-color: lightgray;
}

.container {
padding: 16px;
}
</style>

<div class="container vertical">
    <IgbIconButton @ref="MenuIconButton" @onclick="ToggleNavDrawer" IconName="menu" Collection="material" Variant="@IconButtonVariant.Flat" />
    <IgbNavDrawer Open="true" @ref="NavDrawerRef">
        <IgbNavDrawerHeaderItem>
            Sample Drawer
        </IgbNavDrawerHeaderItem>

        <IgbNavDrawerItem @ref="HomeItemRef" @onclick="(args) => NavDrawerItemClick(args, HomeItemRef)">
            <IgbIcon @ref="@IconRef" slot="icon" IconName="home" Collection="material"></IgbIcon>
            <span slot="content">Home</span>
        </IgbNavDrawerItem>

        <IgbNavDrawerItem @ref="SearchItemRef" @onclick="(args) => NavDrawerItemClick(args, SearchItemRef)">
            <IgbIcon @ref="@IconRef" slot="icon" IconName="search" Collection="material"></IgbIcon>
            <span slot="content">Search</span>
        </IgbNavDrawerItem>
    </IgbNavDrawer>
</div>

@code {
    

    public IgbIconButton MenuIconButton { get; set; }
    public IgbIcon IconRef { get; set; }

    public IgbNavDrawer NavDrawerRef { get; set; }
    public IgbNavDrawerItem HomeItemRef { get; set; }
    public IgbNavDrawerItem SearchItemRef { get; set; }

    public List<IgbNavDrawerItem> NavDrawerItemRefs { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && this.MenuIconButton != null)
        {
            await this.MenuIconButton.EnsureReady();
            await this.MenuIconButton.RegisterIconAsync("menu", "https://unpkg.com/material-design-icons@3.0.1/navigation/svg/production/ic_menu_24px.svg", "material");
        }

        if (firstRender && this.IconRef != null)
        {
            await this.IconRef.EnsureReady();
            await this.IconRef.RegisterIconAsync("home", "https://unpkg.com/material-design-icons@3.0.1/action/svg/production/ic_home_24px.svg", "material");
            await this.IconRef.RegisterIconAsync("search", "https://unpkg.com/material-design-icons@3.0.1/action/svg/production/ic_search_24px.svg", "material");
        }

        if (firstRender)
        {
            NavDrawerItemRefs = new List<IgbNavDrawerItem>();
            await this.HomeItemRef.EnsureReady();
            NavDrawerItemRefs.Add(HomeItemRef);
            await this.SearchItemRef.EnsureReady();
            NavDrawerItemRefs.Add(SearchItemRef);
        }
    }

    public void ToggleNavDrawer(MouseEventArgs args)
    {
        NavDrawerRef.Toggle();
    }

    public void NavDrawerItemClick(MouseEventArgs args, IgbNavDrawerItem item)
    {
        item.Active = true;
        foreach (IgbNavDrawerItem i in NavDrawerItemRefs)
        {
            if(i != item)
            {
                i.Active = false;
            }
        }
    }
}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.

Usage

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

// in Program.cs file

builder.Services.AddIgniteUIBlazor(
  typeof(IgbNavDrawerModule),
  typeof(IgbNavDrawerHeaderItemModule)
);
razor

IgbNavDrawer 구성 요소에 스타일을 적용하려면 추가 CSS 파일을 연결해야 합니다. 다음은 Blazor Web Assembly 프로젝트의 wwwroot/index.html 파일이나 Blazor Server 프로젝트의 Pages/_Host.cshtml 파일에 배치해야 합니다.

<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
razor

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

IgbNavDrawer 사용을 시작하는 가장 간단한 방법은 다음과 같습니다.

<IgbNavDrawer Open="true">
    <IgbNavDrawerHeaderItem>
        Sample Drawer
    </IgbNavDrawerHeaderItem>
    <IgbNavDrawerItem>
        <IgbIcon @ref="@HomeIcon" slot="icon" IconName="home" Collection="material"></IgbIcon>
        <span slot="content">Home</span>
    </IgbNavDrawerItem>
    <IgbNavDrawerItem>
        <IgbIcon @ref="@SearchIcon" slot="icon" IconName="search" Collection="material"></IgbIcon>
        <span slot="content">Search</span>
    </IgbNavDrawerItem>
</IgbNavDrawer>
razor

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

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(IgbNavDrawerModule),
                typeof(IgbNavDrawerHeaderItemModule),
                typeof(IgbIconModule)
   );
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<style>
igc-icon-button::part(base):hover {
background-color: lightgray;
}

.container {
padding: 16px;
}
</style>

<div class="container vertical">
    <IgbIconButton @ref="MenuIconButton" @onclick="ToggleNavDrawer" IconName="menu" Collection="material" Variant="@IconButtonVariant.Flat" />
    <IgbNavDrawer Open="true" @ref="NavDrawerRef">
        <IgbNavDrawerHeaderItem>
            Sample Drawer
        </IgbNavDrawerHeaderItem>

        <IgbNavDrawerItem @ref="HomeItemRef" @onclick="(args) => NavDrawerItemClick(args, HomeItemRef)">
            <IgbIcon @ref="@IconRef" slot="icon" IconName="home" Collection="material"></IgbIcon>
            <span slot="content">Home</span>
        </IgbNavDrawerItem>

        <IgbNavDrawerItem @ref="SearchItemRef" @onclick="(args) => NavDrawerItemClick(args, SearchItemRef)">
            <IgbIcon @ref="@IconRef" slot="icon" IconName="search" Collection="material"></IgbIcon>
            <span slot="content">Search</span>
        </IgbNavDrawerItem>
    </IgbNavDrawer>
</div>

@code {
    

    public IgbIconButton MenuIconButton { get; set; }
    public IgbIcon IconRef { get; set; }

    public IgbNavDrawer NavDrawerRef { get; set; }
    public IgbNavDrawerItem HomeItemRef { get; set; }
    public IgbNavDrawerItem SearchItemRef { get; set; }

    public List<IgbNavDrawerItem> NavDrawerItemRefs { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && this.MenuIconButton != null)
        {
            await this.MenuIconButton.EnsureReady();
            await this.MenuIconButton.RegisterIconAsync("menu", "https://unpkg.com/material-design-icons@3.0.1/navigation/svg/production/ic_menu_24px.svg", "material");
        }

        if (firstRender && this.IconRef != null)
        {
            await this.IconRef.EnsureReady();
            await this.IconRef.RegisterIconAsync("home", "https://unpkg.com/material-design-icons@3.0.1/action/svg/production/ic_home_24px.svg", "material");
            await this.IconRef.RegisterIconAsync("search", "https://unpkg.com/material-design-icons@3.0.1/action/svg/production/ic_search_24px.svg", "material");
        }

        if (firstRender)
        {
            NavDrawerItemRefs = new List<IgbNavDrawerItem>();
            await this.HomeItemRef.EnsureReady();
            NavDrawerItemRefs.Add(HomeItemRef);
            await this.SearchItemRef.EnsureReady();
            NavDrawerItemRefs.Add(SearchItemRef);
        }
    }

    public void ToggleNavDrawer(MouseEventArgs args)
    {
        NavDrawerRef.Toggle();
    }

    public void NavDrawerItemClick(MouseEventArgs args, IgbNavDrawerItem item)
    {
        item.Active = true;
        foreach (IgbNavDrawerItem i in NavDrawerItemRefs)
        {
            if(i != item)
            {
                i.Active = false;
            }
        }
    }
}razor

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

서랍에는 모든 콘텐츠가 제공될 수 있지만 IgbNavDrawerItem 사용하면 기본 스타일을 항목에 적용할 수 있습니다.

구성 요소를 약간 향상시키기 위해 IgbNavbar와 함께 사용할 수 있습니다. 이렇게 하면 좀 더 완성도 높은 모양을 얻을 수 있고 서랍의 메소드를 사용할 수 있습니다. 다음 예제에서 이를 어떻게 사용할 수 있는지 살펴보겠습니다.

<IgbNavbar>
    <IgbIcon slot="start" IconName="menu" Collection="material" />
    <h2>Home</h2>
</IgbNavbar>

<IgbNavDrawer @ref="NavDrawerRef">
    <IgbNavDrawerHeaderItem>
        Sample Drawer
    </IgbNavDrawerHeaderItem>
    <IgbNavDrawerItem>
        <IgbIcon slot="icon" IconName="home" Collection="material" />
        <span slot="content">Home</span>
    </IgbNavDrawerItem>
    <IgbNavDrawerItem>
        <IgbIcon slot="icon" IconName="search" Collection="material" @onclick="OnMenuIconClick" />
        <span slot="content">Search</span>
    </IgbNavDrawerItem>
</IgbNavDrawer>
razor

모든 position 값을 표시하는 라디오 버튼도 추가해 보겠습니다. 이렇게 하면 하나를 선택할 때마다 서랍의 위치가 변경됩니다.

<IgbRadioGroup id="radio-group" Alignment="RadioGroupAlignment.Horizontal">
    <IgbRadio Value="Start" LabelPosition="RadioLabelPosition.After" Checked="true" Change="OnRadioOptionClick">Start</IgbRadio>
    <IgbRadio Value="End" LabelPosition="RadioLabelPosition.After" Change="OnRadioOptionClick">End</IgbRadio>
    <IgbRadio Value="Top" LabelPosition="RadioLabelPosition.After" Change="OnRadioOptionClick">Top</IgbRadio>
    <IgbRadio Value="Bottom" LabelPosition="RadioLabelPosition.After" Change="OnRadioOptionClick">Bottom</IgbRadio>
</IgbRadioGroup>

@code {

    public IgbNavDrawer NavDrawerRef { get; set; }

    public void OnRadioOptionClick(IgbComponentBoolValueChangedEventArgs args)
    {
        IgbRadio radio = args.Parent as IgbRadio;

        if (this.NavDrawerRef != null)
        {
            switch (radio.Value)
            {
                case "Start":
                    {
                        this.NavDrawerRef.Position = NavDrawerPosition.Start;
                        break;
                    }
                case "End":
                    {
                        this.NavDrawerRef.Position = NavDrawerPosition.End;
                        break;
                    }
                case "Top":
                    {
                        this.NavDrawerRef.Position = NavDrawerPosition.Top;
                        break;
                    }
                case "Bottom":
                    {
                        this.NavDrawerRef.Position = NavDrawerPosition.Bottom;
                        break;
                    }
            }
        }
    }
}
razor

마지막으로 탐색 창을 열고 닫는 방법이 필요합니다. 이를 달성하는 방법에는 몇 가지가 있지만 이 예에서는 다음을 수행합니다.

public void OnMenuIconClick()
{
    if (this.NavDrawerRef != null)
    {
        this.NavDrawerRef.Show();
    }
}
razor

모든 것이 순조롭게 진행되면 구성 요소는 이제 다음과 같이 보일 것입니다.

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(IgbNavDrawerModule),
                typeof(IgbNavDrawerHeaderItemModule),
                typeof(IgbNavDrawerItemModule),
                typeof(IgbIconModule),
                typeof(IgbRadioGroupModule),
                typeof(IgbRadioModule)
   );
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container vertical" >
    <IgbNavDrawer @ref="@NavDrawerRef" style="position: relative">
        <IgbNavDrawerHeaderItem>
            Sample Drawer
        </IgbNavDrawerHeaderItem>

        <IgbNavDrawerItem @ref="HomeItemRef" @onclick="(args) => NavDrawerItemClick(args, HomeItemRef)">
            <IgbIcon @ref="@IconRef" slot="icon" IconName="home" Collection="material" />
            <span slot="content">Home</span>
        </IgbNavDrawerItem>

        <IgbNavDrawerItem @ref="SearchItemRef" @onclick="(args) => NavDrawerItemClick(args, SearchItemRef)">
            <IgbIcon @ref="@IconRef" slot="icon" IconName="search" Collection="material" />
            <span slot="content">Search</span>
        </IgbNavDrawerItem>
    </IgbNavDrawer>

    <div id="content" style="width: 100%">
        <IgbRadioGroup id="radio-group" Alignment="RadioGroupAlignment.Horizontal">
            <IgbRadio name="position" Value="Start" LabelPosition="RadioLabelPosition.After" Checked="true" Change="OnRadioOptionClick">Start</IgbRadio>
            <IgbRadio name="position" Value="End" LabelPosition="RadioLabelPosition.After" Change="OnRadioOptionClick">End</IgbRadio>
            <IgbRadio name="position" Value="Top" LabelPosition="RadioLabelPosition.After" Change="OnRadioOptionClick">Top</IgbRadio>
            <IgbRadio name="position" Value="Bottom" LabelPosition="RadioLabelPosition.After" Change="OnRadioOptionClick">Bottom</IgbRadio>
        </IgbRadioGroup>

        <IgbNavbar>
            <IgbIcon @ref="@IconRef" slot="start" IconName="menu" Collection="material" @onclick="OnMenuIconClick" />
            <h2>@Title</h2>
        </IgbNavbar>
    </div>
</div>

@code {
    

    public IgbIcon IconRef { get; set; }

    public IgbNavDrawer NavDrawerRef { get; set; }
    public IgbNavDrawerItem HomeItemRef { get; set; }
    public IgbNavDrawerItem SearchItemRef { get; set; }

    public Dictionary<string, IgbNavDrawerItem> NavDrawerTitlesItemRefs { get; set; }

    public string Title { get; set; } = "Home";

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && this.IconRef != null)
        {
            await this.IconRef.EnsureReady();
            await this.IconRef.RegisterIconAsync("menu", "https://unpkg.com/material-design-icons@3.0.1/navigation/svg/production/ic_menu_24px.svg", "material");
            await this.IconRef.RegisterIconAsync("home", "https://unpkg.com/material-design-icons@3.0.1/action/svg/production/ic_home_24px.svg", "material");
            await this.IconRef.RegisterIconAsync("search", "https://unpkg.com/material-design-icons@3.0.1/action/svg/production/ic_search_24px.svg", "material");
        }

        if (firstRender)
        {
            NavDrawerTitlesItemRefs = new Dictionary<string, IgbNavDrawerItem>();
            await this.HomeItemRef.EnsureReady();
            NavDrawerTitlesItemRefs.Add("Home", HomeItemRef);
            HomeItemRef.Active = true;
            await this.SearchItemRef.EnsureReady();
            NavDrawerTitlesItemRefs.Add("Search", SearchItemRef);
        }
    }

    public void OnRadioOptionClick(IgbRadioChangeEventArgs args)
    {
        IgbRadio radio = args.Parent as IgbRadio;

        if (this.NavDrawerRef != null)
        {
            switch (radio.Value)
            {
                case "Start":
                    {
                        this.NavDrawerRef.Position = NavDrawerPosition.Start;
                        break;
                    }
                case "End":
                    {
                        this.NavDrawerRef.Position = NavDrawerPosition.End;
                        break;
                    }
                case "Top":
                    {
                        this.NavDrawerRef.Position = NavDrawerPosition.Top;
                        break;
                    }
                case "Bottom":
                    {
                        this.NavDrawerRef.Position = NavDrawerPosition.Bottom;
                        break;
                    }
            }
        }
    }

    public void OnMenuIconClick()
    {
        if(this.NavDrawerRef != null)
        {
            this.NavDrawerRef.Show();
        }
    }

    public void NavDrawerItemClick(MouseEventArgs args, IgbNavDrawerItem item)
    {
        item.Active = true;
        Title = NavDrawerTitlesItemRefs.Where(pair => pair.Value == item).Select(pair => pair.Key).ToList()[0];
        foreach (IgbNavDrawerItem i in NavDrawerTitlesItemRefs.Values)
        {
            if (i != item)
            {
                i.Active = false;
            }
        }
    }
}razor

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

Mini Variant

미니 변형을 사용하면 탐색 서랍이 닫히는 대신 너비가 변경됩니다. 빠른 탐색을 유지하는 데 사용되며, 아이콘만 남겨두고 항상 사용할 수 있습니다. 이를 위해서는 서랍의 mini 슬롯만 설정하면 됩니다.

<IgbNavDrawer @ref="@NavDrawerRef" Open="true" style="position: relative">
    <IgbNavDrawerHeaderItem>
        Sample Drawer
    </IgbNavDrawerHeaderItem>
    <IgbNavDrawerItem>
        <IgbIcon @ref="@HomeIcon" slot="icon" Collection="material" IconName="home" />
        <span slot="content">Home</span>
    </IgbNavDrawerItem>
    <IgbNavDrawerItem>
        <IgbIcon @ref="@SearchIcon" slot="icon" Collection="material" IconName="search" />
        <span slot="content">Search</span>
    </IgbNavDrawerItem>
    <div slot="mini">
        <IgbNavDrawerItem>
            <IgbIcon slot="icon" Collection="material" IconName="home" />
        </IgbNavDrawerItem>
        <IgbNavDrawerItem>
            <IgbIcon slot="icon" Collection="material" IconName="search" />
        </IgbNavDrawerItem>
    </div>
</IgbNavDrawer>
razor

결과는 다음과 같습니다.

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(IgbNavDrawerModule),
                typeof(IgbNavDrawerHeaderItemModule),
                typeof(IgbNavDrawerItemModule),
                typeof(IgbIconModule),
                typeof(IgbButtonModule)
   );
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<style>
.container {
padding: 16px;
}
</style>

<div class="container vertical">
    <div id="nav-drawer-container" style="display: flex;">
        <IgbNavDrawer @ref="@NavDrawerRef" Open="true" style="position: relative">
            <IgbNavDrawerHeaderItem>
                Sample Drawer
            </IgbNavDrawerHeaderItem>

            <IgbNavDrawerItem @ref="HomeItemRef" @onclick='(args) => NavDrawerItemClick(args, "home")'>
                <IgbIcon @ref="@IconRef" slot="icon" Collection="material" IconName="home" />
                <span slot="content">Home</span>
            </IgbNavDrawerItem>

            <IgbNavDrawerItem @ref="SearchItemRef" @onclick='(args) => NavDrawerItemClick(args, "search")'>
                <IgbIcon @ref="@IconRef" slot="icon" Collection="material" IconName="search" />
                <span slot="content">Search</span>
            </IgbNavDrawerItem>

            <div slot="mini">
                <IgbNavDrawerItem @ref="HomeMiniRef" @onclick='(args) => NavDrawerItemClick(args, "home")'>
                    <IgbIcon slot="icon" Collection="material" IconName="home" />
                </IgbNavDrawerItem>

                <IgbNavDrawerItem @ref="SearchMiniRef" @onclick='(args) => NavDrawerItemClick(args, "search")'>
                    <IgbIcon slot="icon" Collection="material" IconName="search" />
                </IgbNavDrawerItem>
            </div>
        </IgbNavDrawer>

        <div id="content" style="width: 100%">
            <IgbButton id="toggleBtn" style="margin-left: 50px;" @onclick="OnButtonClick">Toggle</IgbButton>
        </div>
    </div>
</div>

@code {
    

    public IgbIcon IconRef { get; set; }

    public IgbNavDrawer NavDrawerRef { get; set; }
    public IgbNavDrawerItem HomeItemRef { get; set; }
    public IgbNavDrawerItem HomeMiniRef { get; set; }
    public IgbNavDrawerItem SearchItemRef { get; set; }
    public IgbNavDrawerItem SearchMiniRef { get; set; }

    public Dictionary<IgbNavDrawerItem, string> NavDrawerItemsIcons { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && this.IconRef != null)
        {
            await this.IconRef.EnsureReady();
            await this.IconRef.RegisterIconAsync("home",
                    "https://unpkg.com/material-design-icons@3.0.1/action/svg/production/ic_home_24px.svg",
                    "material");
            await this.IconRef.RegisterIconAsync("search",
                    "https://unpkg.com/material-design-icons@3.0.1/action/svg/production/ic_search_24px.svg",
                    "material");
        }

        if (firstRender)
        {
            NavDrawerItemsIcons = new Dictionary<IgbNavDrawerItem, string>();
            await this.HomeItemRef.EnsureReady();
            await this.HomeMiniRef.EnsureReady();
            NavDrawerItemsIcons.Add(HomeItemRef, "home");
            NavDrawerItemsIcons.Add(HomeMiniRef, "home");
            await this.SearchItemRef.EnsureReady();
            await this.SearchMiniRef.EnsureReady();
            NavDrawerItemsIcons.Add(SearchItemRef, "search");
            NavDrawerItemsIcons.Add(SearchMiniRef, "search");
        }
    }

    public void OnButtonClick()
    {
        this.NavDrawerRef.Toggle();
    }

    public void NavDrawerItemClick(MouseEventArgs args, string icon)
    {
        IEnumerable<IgbNavDrawerItem> itemsToBeActive = NavDrawerItemsIcons
                                                           .Where(pair => pair.Value == icon)
                                                           .Select(pair => pair.Key);

        foreach (IgbNavDrawerItem item in itemsToBeActive)
        {
            item.Active = true;
        }

        IEnumerable<IgbNavDrawerItem> itemsToBeInactive = NavDrawerItemsIcons
                                                            .Where(pair => pair.Value != icon)
                                                            .Select(pair => pair.Key);

        foreach (IgbNavDrawerItem item in itemsToBeInactive)
        {
            item.Active = false;
        }
    }
}razor

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

Styling

는 IgbNavDrawer 여러 CSS 부분 -base, main 및 mini를 노출하여 스타일을 완전히 제어할 수 있습니다.

igc-nav-drawer::part(base) {
  background: var(--ig-secondary-500);
}

igc-nav-drawer-item::part(base) {
  color: var(--ig-secondary-500-contrast);
}

igc-nav-drawer-item::part(base):hover {
  background-color: var(--ig-gray-800);
}

igc-nav-drawer-item[active]::part(base) {
  background: var(--ig-warn-500);
  color: var(--ig-warn-500-contrast);
}

igc-nav-drawer-header-item {
  color: var(--ig-warn-500);
}
scss

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(IgbNavDrawerModule),
                typeof(IgbNavDrawerItemModule),
                typeof(IgbNavDrawerHeaderItemModule),
                typeof(IgbIconModule)
   );
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<style>
igc-nav-drawer::part(base) {
    background: #2d313a;
}

igc-nav-drawer-item::part(base) {
    color: #fff;
}

igc-nav-drawer-item::part(base):hover {
    background-color: #3D4149;
}

igc-nav-drawer-item[active]::part(base) {
    background: #f3c03e;
    color: #2c2c2c
}

igc-nav-drawer-header-item {
    color: #f3c03e
}
</style>
<div class="container vertical">
    <div id="root" style="display: flex;">
        <style>
            igc-nav-drawer::part(base) {
                background: #2d313a;
            }

            igc-nav-drawer-item::part(base) {
                color: #fff;
            }

            igc-nav-drawer-item::part(base):hover {
                background-color: #3D4149;
            }

            igc-nav-drawer-item[active]::part(base) {
                background: #f3c03e;
                color: #2c2c2c
            }

            igc-nav-drawer-header-item {
                color: #f3c03e
            }

            igc-icon-button::part(icon) {
                --size: 32px;
                color: #f3c03e
            }

            igc-icon-button::part(base) {
                background-color: #2c2c2c;
            }

            igc-icon-button::part(base):hover {
                background-color: #3D4149;
            }

            .container {
                padding: 16px;
            }
        </style>
        <IgbIconButton @ref="MenuIconButton" @onclick="ToggleNavDrawer" IconName="menu" Collection="material" Variant="@IconButtonVariant.Flat" />
        <IgbNavDrawer @ref="NavDrawerRef" id="navDrawer" Open="true" style="position: relative">
            <IgbNavDrawerHeaderItem>
                Sample Drawer
            </IgbNavDrawerHeaderItem>

            <IgbNavDrawerItem @ref="HomeItemRef" @onclick="(args) => NavDrawerItemClick(args, HomeItemRef)">
                <IgbIcon @ref="@IconRef" slot="icon" Collection="material" IconName="home" />
                <span slot="content">Home</span>
            </IgbNavDrawerItem>

            <IgbNavDrawerItem @ref="SearchItemRef" @onclick="(args) => NavDrawerItemClick(args, SearchItemRef)">
                <IgbIcon @ref="IconRef" slot="icon" Collection="material" IconName="search" />
                <span slot="content">Search</span>
            </IgbNavDrawerItem>
        </IgbNavDrawer>
    </div>
</div>

@code {
    
    public IgbIconButton MenuIconButton { get; set; }
    public IgbIcon IconRef { get; set; }

    public IgbNavDrawer NavDrawerRef { get; set; }
    public IgbNavDrawerItem HomeItemRef { get; set; }
    public IgbNavDrawerItem SearchItemRef { get; set; }
    public List<IgbNavDrawerItem> NavDrawerItemRefs { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && this.MenuIconButton != null)
        {
            await this.MenuIconButton.EnsureReady();
            await this.MenuIconButton.RegisterIconAsync("menu", "https://unpkg.com/material-design-icons@3.0.1/navigation/svg/production/ic_menu_24px.svg", "material");
        }

        if (firstRender && this.IconRef != null)
        {
            await this.IconRef.EnsureReady();
            await this.IconRef.RegisterIconAsync("home", "https://unpkg.com/material-design-icons@3.0.1/action/svg/production/ic_home_24px.svg", "material");
            await this.IconRef.RegisterIconAsync("search", "https://unpkg.com/material-design-icons@3.0.1/action/svg/production/ic_search_24px.svg", "material");
        }

        if (firstRender)
        {
            NavDrawerItemRefs = new List<IgbNavDrawerItem>();
            await this.HomeItemRef.EnsureReady();
            NavDrawerItemRefs.Add(HomeItemRef);
            await this.SearchItemRef.EnsureReady();
            NavDrawerItemRefs.Add(SearchItemRef);
        }
    }

    public void ToggleNavDrawer(MouseEventArgs args)
    {
        NavDrawerRef.Toggle();
    }

    public void NavDrawerItemClick(MouseEventArgs args, IgbNavDrawerItem item)
    {
        item.Active = true;
        foreach (IgbNavDrawerItem i in NavDrawerItemRefs)
        {
            if (i != item)
            {
                i.Active = false;
            }
        }
    }
}razor

igc-nav-drawer::part(base) {
    background: #2d313a;
}

igc-nav-drawer-item::part(base) {
    color: #fff;
}

igc-nav-drawer-item::part(base):hover {
    background-color: #3D4149;
}

igc-nav-drawer-item[active]::part(base) {
    background: #f3c03e;
    color: #2c2c2c
}

igc-nav-drawer-header-item {
    color: #f3c03e
}
css

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

Blazor 탐색 서랍 개요

Blazor Navigation Drawer Example

Usage

Adding Navigation Drawer Items

Navbar Integration

Mini Variant

Styling

API References

Additional Resources