Blazor Navbar 개요

    Ignite UI for Blazor 사용자에게 앱에서의 현재 위치를 알려줍니다. 탐색 표시줄은 또한 검색이나 즐겨찾기 등의 빠른 작업에 대한 링크를 제공하여 사용자가 잘못된 경로나 상태로 이동하지 않고도 애플리케이션을 원활하게 탐색할 수 있도록 돕습니다. 막대는 그것이 담긴 용기의 상단에 위치합니다.

    Blazor Navbar Example

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

    Usage

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

    // in Program.cs file

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

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

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

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

    그런 다음 IgbNavbar 템플릿에 다음 코드를 추가하여 제목만 있는 기본 IgbNavbar 표시할 수 있습니다.

    <IgbNavbar>Navigation Title</IgbNavbar>

    Content

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

    Styling

    탐색 표시줄 구성 요소는 여러 CSS 부분(base, start, middle 및 end)을 노출하여 스타일을 완벽하게 제어할 수 있습니다.

    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
}

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

    API References

    Additional Resources