Web Components 탐색 서랍 개요

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

    Web Components Navigation Drawer Example

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

    EXAMPLE
    TS
    HTML
    add-drawer-items.css
    index.css
    Edit in:

    Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

    Usage

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

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

defineComponents(IgcNavDrawerComponent);
ts

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

    Ignite UI for Web Components | CTA Banner

    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>
html

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

    EXAMPLE
    TS
    HTML
    add-drawer-items.css
    index.css
    Edit in:

    서랍에는 모든 콘텐츠가 제공될 수 있지만 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>
html

    모든 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;
});
ts
    <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>
html

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

    // ...
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();
    }
}
ts

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    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>
html

    결과는 다음과 같습니다.

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    Styling

    는 IgcNavDrawerComponent 여러 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
    TS
    HTML
    drawer-styling.css
    index.css
    Edit in:

    API References

    Additional Resources