Web Components 탐색 창 개요

    Ignite UI for Web Components 콘텐츠 내에서 확장하거나 축소할 수 있는 측면 탐색 기능을 제공합니다. 미니 버전은 닫힌 상태에서도 탐색에 빠르게 액세스할 수 있습니다. 기본 메뉴 항목 스타일을 제공하는 동시에 콘텐츠를 완벽하게 사용자 정의할 수 있습니다.

    Web Components Navigation Drawer Example

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

    Usage

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

    npm install igniteui-webcomponents

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

defineComponents(IgcNavDrawerComponent);

    Ignite UI for Web Components 에 대한 전체 소개는 시작 항목을 참조하세요.

    Adding Navigation Drawer Items

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

    <igc-nav-drawer open="true">
    <igc-nav-drawer-header-item>
        Sample Drawer
    </igc-nav-drawer-header-item>
    <igc-nav-drawer-item>
        <igc-icon slot="icon" name="home"></igc-icon>
        <span slot="content">Home</span>
    </igc-nav-drawer-item>
    <igc-nav-drawer-item>
        <igc-icon slot="icon" name="search"></igc-icon>
        <span slot="content">Search</span>
    </igc-nav-drawer-item>
</igc-nav-drawer>

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

    서랍에는 모든 콘텐츠가 제공될 수 있지만 IgcNavDrawerItemComponent 사용하면 기본 스타일을 항목에 적용할 수 있습니다.

    구성 요소를 약간 향상시키기 위해 IgcNavbarComponent와 함께 사용할 수 있습니다. 이렇게 하면 좀 더 완성도 높은 모양을 얻을 수 있고 서랍의 메소드를 사용할 수 있습니다. 다음 예제에서 이를 어떻게 사용할 수 있는지 살펴보겠습니다.

    <igc-navbar>
  <igc-icon slot="start" name="menu" id="menu"></igc-icon>
  <h2>Home</h2>
</igc-navbar>

<igc-nav-drawer id="navDrawer">
    <igc-nav-drawer-header-item>
        Sample Drawer
    </igc-nav-drawer-header-item>
    <igc-nav-drawer-item>
        <igc-icon slot="icon" name="home"></igc-icon>
        <span slot="content">Home</span>
    </igc-nav-drawer-item>
    <igc-nav-drawer-item>
        <igc-icon slot="icon" name="search"></igc-icon>
        <span slot="content">Search</span>
    </igc-nav-drawer-item>
</igc-nav-drawer>

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

    // ...
import { defineComponents, IgcNavDrawerComponent, IgcRadioComponent, IgcRadioGroupComponent } from 'igniteui-webcomponents';

defineComponents(IgcNavDrawerComponent, IgcRadioComponent, IgcRadioGroupComponent);
this.navDrawer = document.getElementById('navDrawer') as IgcNavDrawerComponent;
this.radioGroup = document.getElementById('radio-group') as IgcRadioGroupComponent;
this.radioGroup.addEventListener('click', (radio: any) => {
    this.navDrawer.position = radio.target.value;
});

    <igc-radio-group id="radio-group" alignment="horizontal">
    <igc-radio name="position" value="start" label-position="after" checked>Start</igc-radio>
    <igc-radio name="position" value="end" label-position="after">End</igc-radio>
    <igc-radio name="position" value="top" label-position="after">Top</igc-radio>
    <igc-radio name="position" value="bottom" label-position="after">Bottom</igc-radio>
</igc-radio-group>

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

    // ...
const menu = document.getElementById('menu');
const navDrawer = document.querySelector('igc-nav-drawer') as IgcNavDrawerComponent;

menu!.addEventListener('click', () => {
    navDrawer.show();
})

document.getElementById('root')!.onclick = (e) => {
    if (e.target != document.getElementById('navDrawer')) {
        navDrawer.hide();
    }
}

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

    Mini Variant

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

    <igc-nav-drawer position="start">
    <igc-nav-drawer-header-item>Sample Drawer</igc-nav-drawer-header-item>
    <igc-nav-drawer-item>
        <igc-icon slot="icon" name="home"></igc-icon>
        <span slot="content">Home</span>
    </igc-nav-drawer-item>
    <igc-nav-drawer-item>
        <igc-icon slot="icon" name="search"></igc-icon>
        <span slot="content">Search</span>
    </igc-nav-drawer-item>
    <div slot="mini">
        <igc-nav-drawer-item>
            <igc-icon slot="icon" name="home"></igc-icon>
        </igc-nav-drawer-item>
        <igc-nav-drawer-item>
            <igc-icon slot="icon" name="search"></igc-icon>
        </igc-nav-drawer-item>
    </div>
</igc-nav-drawer>

    결과는 다음과 같습니다.

    Styling the Navigation Drawer

    탐색 창 구성 요소는 여러 CSS 부분(base, main 및 mini을 노출합니다. 탐색 창 항목 구성 요소는 세 가지 CSS 부분인 base, icon 및 content 표시하여 해당 스타일을 완벽하게 제어할 수 있습니다.

    igc-nav-drawer::part(base) {
    background: #2d313a;
}

igc-nav-drawer-item::part(base) {
    color: #fff;
}

igc-nav-drawer-item::part(base):hover {
    background-color: #3D4149;
}

igc-nav-drawer-item[active]::part(base) {
    background: #f3c03e;
    color: #2c2c2c
}

igc-nav-drawer-header-item {
    color: #f3c03e
}

    API References

    Additional Resources