React Navbar | Infragistics

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

다음 예제에서는 아이콘과 텍스트 머리글이 있는 a IgrNavbar를 나타냅니다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrNavbar, IgrIcon, IgrNavbarModule, IgrIconModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrNavbarModule.register();
IgrIconModule.register();

export default class NavbarOverview extends React.Component<any, any> {

    constructor(props: any) {
        super(props);        
        this.iconRef = this.iconRef.bind(this);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrNavbar style={{ height: '65px' }}>
                    <div slot="start">
                        <IgrIcon ref={this.iconRef} name="home" collection="material" />
                    </div>
                    <h2>Sample App</h2>
                    <div slot="end">
                        <IgrIcon name="search" collection="material" />
                    </div>
                    <div slot="end">
                        <IgrIcon name="favorite" collection="material" />
                    </div>
                    <div slot="end">
                        <IgrIcon name="more_vert" collection="material" />
                    </div>
                </IgrNavbar>
            </div>
        );
    }

    public iconRef(icon: IgrIcon){
        if (!icon) { return; }

        const homeIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';
        const searchIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>';
        const favoriteIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>';
        const moreVertIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>';

        icon.registerIconFromText("home", homeIcon, "material");
        icon.registerIconFromText("search", searchIcon, "material");
        icon.registerIconFromText("favorite", favoriteIcon, "material");
        icon.registerIconFromText("more_vert", moreVertIcon, "material");
        
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<NavbarOverview/>);
tsx

이 샘플이 마음에 드시나요? Ignite UI for React 전체에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

용법

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

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

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

npm install igniteui-react
cmd

그런 다음 필요한 CSS를 IgrNavbar 가져오고 다음과 같이 모듈을 등록해야 합니다.

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

IgrNavbarModule.register();
tsx

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

콘텐츠

당신은 일부를 추가 할 수 있습니다 IgrIcon 요소를 사용하여 Start 그리고 End 슬롯을 IgrNavbar 다음 샘플에 표시된 대로:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrNavbar, IgrIcon, IgrNavbarModule, IgrIconModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrNavbarModule.register();
IgrIconModule.register();

export default class NavbarOverview extends React.Component<any, any> {

    constructor(props: any) {
        super(props);        
        this.iconRef = this.iconRef.bind(this);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrNavbar style={{ height: '65px' }}>
                    <div slot="start">
                        <IgrIcon ref={this.iconRef} name="home" collection="material" />
                    </div>
                    <h2>Sample App</h2>
                    <div slot="end">
                        <IgrIcon name="search" collection="material" />
                    </div>
                    <div slot="end">
                        <IgrIcon name="favorite" collection="material" />
                    </div>
                    <div slot="end">
                        <IgrIcon name="more_vert" collection="material" />
                    </div>
                </IgrNavbar>
            </div>
        );
    }

    public iconRef(icon: IgrIcon){
        if (!icon) { return; }

        const homeIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';
        const searchIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>';
        const favoriteIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>';
        const moreVertIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>';

        icon.registerIconFromText("home", homeIcon, "material");
        icon.registerIconFromText("search", searchIcon, "material");
        icon.registerIconFromText("favorite", favoriteIcon, "material");
        icon.registerIconFromText("more_vert", moreVertIcon, "material");
        
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<NavbarOverview/>);
tsx

스타일링

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

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

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import './NavbarStyling.css';
import { IgrNavbar, IgrIcon, IgrNavbarModule, IgrIconModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrNavbarModule.register();
IgrIconModule.register();

export default class NavbarStyling extends React.Component<any, any> {

    constructor(props: any) {
        super(props);        
        this.iconRef = this.iconRef.bind(this);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrNavbar style={{height: '65px'}}>
                    <div slot="start">
                        <IgrIcon ref={this.iconRef} name="home" collection="material" />
                    </div>
                    <h2>Sample App</h2>
                    <div slot="end">
                        <IgrIcon name="search" collection="material" />
                    </div>
                    <div slot="end">
                        <IgrIcon name="favorite" collection="material" />
                    </div>
                    <div slot="end">
                        <IgrIcon name="more_vert" collection="material" />
                    </div>
                </IgrNavbar>
            </div>
        );
    }

    public iconRef(icon: IgrIcon){
        if (!icon) { return; }

        const homeIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';
        const searchIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>';
        const favoriteIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>';
        const moreVertIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>';

        icon.registerIconFromText("home", homeIcon, "material");
        icon.registerIconFromText("search", searchIcon, "material");
        icon.registerIconFromText("favorite", favoriteIcon, "material");
        icon.registerIconFromText("more_vert", moreVertIcon, "material");
        
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<NavbarStyling/>);
tsx

igc-icon {
    color: currentColor !important;
}

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
}
css

React Navbar Overview

React Navbar 예제

용법

콘텐츠

스타일링

API 참조

추가 리소스