React Navbar Overview

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

    React Navbar Example

    다음 예시는 아이콘과 텍스트 헤더가 있는 A를IgrNavbar 나타냅니다:

    Usage

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

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

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

    npm install igniteui-react

    그 다음 다음과 같이 필요한 CSS를 가져오IgrNavbar 면 됩니다:

    import { IgrNavbar } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

    <IgrNavbar>
    <span>Navigation Title</span>
</IgrNavbar>

    Content

    시작 또는 끝 위치에 다른 컴포넌트를 콘텐츠로 추가IgrNavbar 하여 사용자가 바에서 직접 주요 위치로 이동할 수 있도록 컴포넌트를 향상시킬IgrIcon 수 있습니다:

     <IgrNavbar>
    <div slot="start">
        <IgrIcon name="home" collection="material" />
    </div>
    <h2>Sample App</h2>
    <div slot="end">
        <IgrIcon name="search" collection="material" />
    </div>
    ...
</IgrNavbar>

    Styling

    이 컴포넌트는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);;
}

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

    API References

    Additional Resources