Web Components 탐색 모음 개요

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

    Web Components 탐색 모음 예

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

    용법

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

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

defineComponents(IgcNavbarComponent);
ts

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

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

    <igc-navbar>Navigation Title</igc-navbar>
html
    Ignite UI for Web Components | CTA 배너

    콘텐츠

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    스타일링

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

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

    EXAMPLE
    TS
    HTML
    index.css
    NavbarStyling.css
    Edit in:

    API 참조

    추가 리소스