Web Components NavDrawer

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

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

import {
  defineComponents, IgcNavDrawerComponent, IgcNavDrawerItemComponent,
  IgcIconComponent, registerIconFromText, IgcIconButtonComponent
} from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './add-drawer-items.css';

defineComponents(IgcNavDrawerComponent, IgcIconComponent, IgcIconButtonComponent);

const searchIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><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 homeIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';

const menuIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>';

export class NavDrawerAddItems {
  private navDrawer: IgcNavDrawerComponent;

  constructor() {
    this.navDrawer = document.querySelector('igc-nav-drawer') as IgcNavDrawerComponent;
    const toggleButton = document.querySelector('igc-icon-button[name="menu"]') as IgcIconButtonComponent;

    this.navDrawer.onclick = this.navDrawerItemClick.bind(this);
    toggleButton.onclick = this.toggleNavDrawer.bind(this);

    registerIconFromText('home', homeIcon);
    registerIconFromText('search', searchIcon);
    registerIconFromText('menu', menuIcon);
  }

  public navDrawerItemClick = (e: any) => {
    const target = e.target as HTMLElement;
    const drawerItem = target.closest('igc-nav-drawer-item');

    if (drawerItem) {
      drawerItem.active = true;

      const drawerItems = Array.from<IgcNavDrawerItemComponent>(
        this.navDrawer.querySelectorAll('igc-nav-drawer-item')
      ).filter((item) => item !== drawerItem);

      drawerItems.forEach((item) => {
        item.active = false;
      });
    }
  }

  public toggleNavDrawer = (e: any) => {
    this.navDrawer?.toggle();
  }
}

new NavDrawerAddItems();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>NavDrawer Add Items</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div id="button-wrapper">
        <igc-icon-button name="menu" variant="flat"></igc-icon-button>
      </div>
        <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>
    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>html

#button-wrapper{
    padding: 16px;
}

igc-icon-button::part(icon) {
    --size: 32px;
}
css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

용법

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

npm install igniteui-webcomponents
cmd

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

defineComponents(IgcNavDrawerComponent);
ts

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

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

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

import {
  defineComponents, IgcNavDrawerComponent, IgcNavDrawerItemComponent,
  IgcIconComponent, registerIconFromText, IgcIconButtonComponent
} from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './add-drawer-items.css';

defineComponents(IgcNavDrawerComponent, IgcIconComponent, IgcIconButtonComponent);

const searchIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><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 homeIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';

const menuIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>';

export class NavDrawerAddItems {
  private navDrawer: IgcNavDrawerComponent;

  constructor() {
    this.navDrawer = document.querySelector('igc-nav-drawer') as IgcNavDrawerComponent;
    const toggleButton = document.querySelector('igc-icon-button[name="menu"]') as IgcIconButtonComponent;

    this.navDrawer.onclick = this.navDrawerItemClick.bind(this);
    toggleButton.onclick = this.toggleNavDrawer.bind(this);

    registerIconFromText('home', homeIcon);
    registerIconFromText('search', searchIcon);
    registerIconFromText('menu', menuIcon);
  }

  public navDrawerItemClick = (e: any) => {
    const target = e.target as HTMLElement;
    const drawerItem = target.closest('igc-nav-drawer-item');

    if (drawerItem) {
      drawerItem.active = true;

      const drawerItems = Array.from<IgcNavDrawerItemComponent>(
        this.navDrawer.querySelectorAll('igc-nav-drawer-item')
      ).filter((item) => item !== drawerItem);

      drawerItems.forEach((item) => {
        item.active = false;
      });
    }
  }

  public toggleNavDrawer = (e: any) => {
    this.navDrawer?.toggle();
  }
}

new NavDrawerAddItems();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>NavDrawer Add Items</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div id="button-wrapper">
        <igc-icon-button name="menu" variant="flat"></igc-icon-button>
      </div>
        <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>
    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>html

#button-wrapper{
    padding: 16px;
}

igc-icon-button::part(icon) {
    --size: 32px;
}
css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

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

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

import { defineComponents, IgcNavbarComponent, IgcNavDrawerComponent, IgcNavDrawerItemComponent,
  IgcIconComponent, IgcRadioComponent, IgcRadioGroupComponent, registerIconFromText } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcNavbarComponent, IgcNavDrawerComponent, IgcIconComponent, IgcRadioComponent, IgcRadioGroupComponent);

const searchIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><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 homeIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';

const menuIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>';
export class NavDrawerAddPositionsNavbar {
    constructor() {
      const menu = document.getElementById('menu');
      const navDrawer = document.querySelector('igc-nav-drawer') as IgcNavDrawerComponent;
      const navbarHeader = document.getElementById('navbar-header');

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

      document.getElementById('nav-drawer-container')!.onclick = (e) => {
        if(e.target === document.getElementById('content')) {
          navDrawer.hide();
        }
      }

      navDrawer.onclick = (e) => {
        const target = e.target as HTMLElement;
        const drawerItem = target.closest('igc-nav-drawer-item');

        if (drawerItem) {
          drawerItem.active = true;
          const span = drawerItem.querySelector('span');
          navbarHeader!.innerHTML = span!.innerText;

          const drawerItems = Array.from<IgcNavDrawerItemComponent>(
            navDrawer.querySelectorAll('igc-nav-drawer-item')
          ).filter((item) => item !== drawerItem);

          drawerItems.forEach((item) => {
            item.active = false;
          });
        }
      }

      const radioGroup = document.getElementById('radio-group') as IgcRadioGroupComponent;

      radioGroup.addEventListener('click', (radio: any) => {
          navDrawer.position = radio.target.value;
      });

      registerIconFromText('home', homeIcon);
      registerIconFromText('menu', menuIcon);
      registerIconFromText('search', searchIcon);
    }
}

new NavDrawerAddPositionsNavbar();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>NavDrawer Add Positions and Navbar</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div id="nav-drawer-container" class="container sample center">
        <igc-nav-drawer id="navDrawer" style="position: relative">
          <igc-nav-drawer-header-item>
              Sample Drawer
          </igc-nav-drawer-header-item>

          <igc-nav-drawer-item active>
              <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>

        <div id="content" style="width: 100%; height: inherit;">
          <igc-radio-group id="radio-group" alignment="horizontal" style="margin-bottom: 10px;">
            <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>

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

    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

미니 변형

미니 변형을 사용하면 탐색 서랍이 닫히는 대신 너비가 변경됩니다. 빠른 탐색을 유지하는 데 사용되며, 아이콘만 남겨두고 항상 사용할 수 있습니다. 이를 위해서는 서랍의 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

결과는 다음과 같습니다.

import { defineComponents, IgcNavDrawerComponent, IgcNavDrawerItemComponent,
  IgcButtonComponent, IgcIconComponent, registerIconFromText } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcNavDrawerComponent, IgcButtonComponent, IgcIconComponent);

const searchIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><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 homeIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';

export class NavDrawerAddMini {
    constructor() {
      const btn = document.getElementById('toggleBtn');
      const navDrawer = document.querySelector('igc-nav-drawer') as IgcNavDrawerComponent;

      btn!.addEventListener('click', () => {
        navDrawer.toggle();
      })

      document.getElementById('nav-drawer-container')!.onclick = (e) => {
        if(e.target === document.getElementById('content')) {
          navDrawer.hide();
        }
      }

      navDrawer.onclick = (e) => {
        const target = e.target as HTMLElement;
        const drawerItem = target.closest('igc-nav-drawer-item');

        if (drawerItem) {
          const iconName = drawerItem.querySelector('igc-icon')!.name;
          const icons = document.querySelectorAll(`igc-icon`);

          icons.forEach(icon => {
            const parentItem = icon.parentElement! as IgcNavDrawerItemComponent;

            if(icon.name === iconName) {
              parentItem.active = true;
            } else {
              parentItem.active = false;
            }
          })
        }
      }

      registerIconFromText('search', searchIcon);

      registerIconFromText('home', homeIcon);
    }
}

new NavDrawerAddMini();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>NavDrawer Add Mini</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
        <div id="nav-drawer-container" style="display: flex; height: inherit;">
          <igc-nav-drawer id="navDrawer">
              <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>

          <div id="content" style="width: 100%">
            <igc-button id="toggleBtn" style="margin-left: 70px;">Toggle</igc-button>
          </div>
        </div>
    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

스타일링

는 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

import { defineComponents, IgcNavDrawerComponent, IgcNavDrawerItemComponent, IgcIconComponent,
         registerIconFromText, IgcIconButtonComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './drawer-styling.css';
import './layout.css'

defineComponents(IgcNavDrawerComponent, IgcIconComponent, IgcIconButtonComponent);

const searchIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><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 homeIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';

const menuIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>';

export class NavDrawerStyling {
  private navDrawer: IgcNavDrawerComponent;

  constructor() {
    this.navDrawer = document.querySelector('igc-nav-drawer') as IgcNavDrawerComponent;
    const toggleButton = document.querySelector('igc-icon-button[name="menu"]') as IgcIconButtonComponent;

    this.navDrawer.onclick = this.navDrawerItemClick.bind(this);
    toggleButton.onclick = this.toggleNavDrawer.bind(this);

    registerIconFromText('home', homeIcon);
    registerIconFromText('search', searchIcon);
    registerIconFromText('menu', menuIcon);
  }

  public navDrawerItemClick = (e: any) => {
    const target = e.target as HTMLElement;
    const drawerItem = target.closest('igc-nav-drawer-item');

    if (drawerItem) {
      drawerItem.active = true;

      const drawerItems = Array.from<IgcNavDrawerItemComponent>(
        this.navDrawer.querySelectorAll('igc-nav-drawer-item')
      ).filter((item) => item !== drawerItem);

      drawerItems.forEach((item) => {
        item.active = false;
      });
    }
  }

  public toggleNavDrawer = (e: any) => {
    this.navDrawer?.toggle();
  }
}

new NavDrawerStyling();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>NavDrawer Add Positions and Navbar</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div id="button-wrapper">
        <igc-icon-button name="menu" variant="flat"></igc-icon-button>
      </div>
      <igc-nav-drawer id="navDrawer" open="true" style="position: relative">
        <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>
    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>html

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

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

#button-wrapper {
  padding: 16px;
}

igc-icon-button::part(icon) {
  color: var(--ig-secondary-500);
}css

Web Components 탐색 서랍 개요

Web Components 탐색 서랍 예

용법

탐색 창 항목 추가

Navbar 통합

미니 변형

스타일링

API 참조

추가 리소스