Web Components 탐색 모음 개요

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

    Web Components Navbar Example

    The following example represents a IgcNavbarComponent with icons and text header:

    Usage

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

    npm install igniteui-webcomponents

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

defineComponents(IgcNavbarComponent);

    Ignite UI for Web Components에 대한 완전한 소개는 '시작 주제'를 읽어보세요.

    Then in the template of IgcNavbarComponent, you can add the following code to show a basic IgcNavbarComponent with a title only:

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

    Content

    You can enhance the IgcNavbarComponent component by adding IgcIconComponent or other components at the start or end position as content, allowing users to navigate to key positions directly from the bar:

    <igc-navbar>
    <igc-icon name="home" slot="start"></igc-icon>
    <h2>Sample App</h2>
    <igc-icon name="search" slot="end"></igc-icon>
    ...
</igc-navbar>

    Styling

    The NavBar component exposes several CSS parts, giving you full control over its style:

    이름 설명
    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);;
}

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

    API References

    Additional Resources