Web Components Navbar 개요

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

    Web Components Navbar Example

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

    Usage

    먼저 다음 명령을 실행하여 Ignite UI for Web Components 설치해야 합니다.

    npm install igniteui-webcomponents

    import { defineComponents, IgcNavbarComponent } from 'igniteui-webcomponents';

defineComponents(IgcNavbarComponent);

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

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

    <igc-navbar>Navigation Title</igc-navbar>

    Content

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

    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