Blazor 탐색 창 개요

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

    Blazor Navigation Drawer Example

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

    Usage

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

    // in Program.cs file
    
    builder.Services.AddIgniteUIBlazor(
      typeof(IgbNavDrawerModule),
      typeof(IgbNavDrawerHeaderItemModule)
    );
    

    또한 IgbNavDrawer 구성 요소에 스타일을 적용하려면 추가 CSS 파일을 연결해야 합니다. 다음은 Blazor 웹 어셈블리 프로젝트의 wwwroot/index.html 파일 또는 Blazor Server 프로젝트의 Pages/_Host.cshtml 파일에 배치되어야 합니다.

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

    Ignite UI for Blazor UI에 대한 전체 소개는 시작 항목을 참조하세요.

    Adding Navigation Drawer Items

    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>
    

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

    서랍에는 모든 콘텐츠가 제공될 수 있지만 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>
    

    모든 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;
                        }
                }
            }
        }
    }
    

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

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

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

    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>
    

    결과는 다음과 같습니다.

    Styling the Navigation Drawer

    탐색 창 구성 요소는 여러 CSS 부분(base, mainmini을 노출합니다. 탐색 창 항목 구성 요소는 세 가지 CSS 부분인 base, iconcontent 표시하여 해당 스타일을 완벽하게 제어할 수 있습니다.

    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
    }
    

    API References

    Additional Resources