React Navigation Drawer 개요

    Ignite UI for React 콘텐츠 내에서 확장하거나 축소할 수 있는 측면 탐색을 제공합니다. 미니 버전은 닫혀 있어도 탐색에 빠르게 액세스할 수 있습니다. 콘텐츠는 완전히 사용자 정의할 수 있으며 기본 메뉴 항목 스타일도 제공합니다.

    React Navigation Drawer 예제

    이 샘플에서는 구성 요소를 만드는 IgrNavDrawer 방법을 보여 줍니다.

    EXAMPLE
    TSX
    Edit in:

    용법

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

    npm install igniteui-react
cmd

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

    import { IgrNavDrawer, IgrNavDrawerHeaderItem, IgrNavDrawerItem } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
tsx

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

    탐색 창 항목 추가

    사용을 IgrNavDrawer 시작하는 가장 간단한 방법은 다음과 같습니다.

    <IgrNavDrawer open={true}>
    <IgrNavDrawerHeaderItem>
        <span>Sample Drawer</span>
    </IgrNavDrawerHeaderItem>
    <IgrNavDrawerItem>
        <div slot="icon">
            <IgrIcon name="home" collection="material" />
        </div>
        <span slot="content">Home</span>
    </IgrNavDrawerItem>
    <IgrNavDrawerItem>
        <div slot="icon">
            <IgrIcon name="search" collection="material" />
        </div>
        <span slot="content">Search</span>
    </IgrNavDrawerItem>
</IgrNavDrawer>
tsx

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

    EXAMPLE
    TSX
    Edit in:

    서랍 IgrNavDrawerItem에 모든 콘텐츠를 제공할 수 있지만 항목에 즉시 사용 가능한 스타일을 적용할 수 있습니다.

    구성 요소를 약간 향상시키기 위해 와 함께 사용할 수 있습니다 IgrNavbar. 이렇게 하면 더 완성된 모양을 얻을 수 있고 서랍의 방법을 사용할 수 있습니다. 다음 예제에서 이를 사용하는 방법을 살펴보겠습니다.

    <IgrNavbar>
    <div slot="start">
        <IgrIcon name="menu" collection="material"/>
    </div>
    <h2>Home</h2>
</IgrNavbar>

<IgrNavDrawer>
    <IgrNavDrawerHeaderItem>
        <span>Sample Drawer</span>
    </IgrNavDrawerHeaderItem>
    <IgrNavDrawerItem>
        <div slot="icon">
            <IgrIcon name="home" collection="material" />
        </div>
        <span slot="content">Home</span>
    </IgrNavDrawerItem>
    <IgrNavDrawerItem>
        <div slot="icon">
            <IgrIcon name="search" collection="material" />
        </div>
        <span slot="content">Search</span>
    </IgrNavDrawerItem>
</IgrNavDrawer>
tsx

    모든 position 값을 표시하는 라디오 버튼도 추가해 보겠습니다. 이렇게 하면 하나를 선택할 때마다 서랍의 위치가 변경됩니다.

    <IgrRadioGroup alignment="horizontal">
    <IgrRadio value="start" labelPosition="after" checked={this.state.drawerPosition === "start"} onChange={this.onRadioChange}>
        <span>Start</span>
    </IgrRadio>
    <IgrRadio value="end" labelPosition="after" checked={this.state.drawerPosition === "end"} onChange={this.onRadioChange}>
        <span>End</span>
    </IgrRadio>
    <IgrRadio value="top" labelPosition="after" checked={this.state.drawerPosition === "top"} onChange={this.onRadioChange}>
        <span>Top</span>
    </IgrRadio>
    <IgrRadio value="bottom" labelPosition="after" checked={this.state.drawerPosition === "bottom"} onChange={this.onRadioChange}>
        <span>Bottom</span>
    </IgrRadio>
</IgrRadioGroup>

<IgrNavDrawer position={this.state.drawerPosition} />

public onRadioChange(e: IgrRadioChangeEventArgs) {
    if (e.checked == true) {
        this.setState({ drawerPosition: e.detail.value });
    }
}
tsx

    마지막으로 탐색 창을 열고 닫는 방법이 필요합니다. 이를 달성하는 방법에는 몇 가지가 있지만 이 예에서는 다음을 수행합니다.

    public onMenuIconClick() {
    if (this.navDrawerRef) {
        this.navDrawerRef.show();
    }
}
tsx

    모든 것이 순조롭게 진행되면 구성 요소는 이제 다음과 같이 보일 것입니다.

    EXAMPLE
    TSX
    Edit in:

    미니 변형

    미니 변형을 사용하면 탐색 서랍이 닫히는 대신 너비가 변경됩니다. 빠른 탐색을 유지하는 데 사용되며, 아이콘만 남겨두고 항상 사용할 수 있습니다. 이를 위해서는 서랍의 mini 슬롯만 설정하면 됩니다.

    <IgrNavDrawer>
    <IgrNavDrawerItem>
        <div slot="icon">
            <IgrIcon name="home" collection="material" />
        </div>
        <span slot="content">Home</span>
    </IgrNavDrawerItem>
    <IgrNavDrawerItem>
        <div slot="icon">
            <IgrIcon name="search" collection="material"/>
        </div>
        <span slot="content">Search</span>
    </IgrNavDrawerItem>
    <div slot="mini">
        <IgrNavDrawerItem>
            <div slot="icon">
                <IgrIcon name="home" collection="material"/>
            </div>
        </IgrNavDrawerItem>
        <IgrNavDrawerItem>
            <div slot="icon">
                <IgrIcon name="search" collection="material" />
            </div>
        </IgrNavDrawerItem>
    </div>
</IgrNavDrawer>

<IgrButton clicked={this.onButtonClick}>
    <span>Toggle</span>
</IgrButton>
tsx

    결과는 다음과 같습니다.

    EXAMPLE
    TSX
    Edit in:

    스타일링

    는 IgrNavDrawer 여러 CSS 부분 -base, main 및 mini를 노출하여 스타일을 완전히 제어할 수 있습니다.

    igc-nav-drawer::part(base) {
  background: var(--ig-secondary-500);
}

igc-nav-drawer-item::part(base) {
  color: var(--ig-secondary-500-contrast);
}

igc-nav-drawer-item::part(base):hover {
  background-color: var(--ig-gray-800);
}

igc-nav-drawer-item[active]::part(base) {
  background: var(--ig-warn-500);
  color: var(--ig-warn-500-contrast);
}

igc-nav-drawer-header-item {
  color: var(--ig-warn-500);
}
scss

    EXAMPLE
    TSX
    CSS
    Edit in:

    API 참조

    추가 리소스