Web Components NavDrawer | インフラジスティックス

Web Components Navigation Drawer は、コンテンツ内で展開または縮小されることができるサイドナビゲーションを提供します。ミニバージョンが閉じている場合もナビゲーションへのクイックアクセスを提供します。そのコンテンツは完全にカスタマイズ可能であると同時に、デフォルトのメニュー項目のスタイルも提供します。

このサンプルは、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ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

使用方法

まず、次のコマンドを実行して 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 の値を表示するためにいくつかのラジオボタンを追加しましょう。このように、1 つが選択されるたびに、ドロワーの位置を変更します。

// ...
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

そして最後に、Navigation Drawer を開閉する方法が必要です。これを実現するにはいくつかの方法がありますが、この例のために、次のことを行います:

// ...
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

ミニバリアント

ミニバリアントを使用する場合、Navigation Drawer を閉じる代わりに幅を変更します。アイコンだけを残して、いつでも利用できるクイックナビゲーションを維持するために使用されます。これを実現するには、ドロワーの 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

スタイル設定

Navigation Drawer コンポーネントは、base、main、mini など、いくつかの CSS パーツも公開し、スタイルを完全に制御できるようにします。

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';

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: #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;
}

#button-wrapper{
    padding: 16px;
}

igc-icon-button::part(icon) {
    --size: 32px;
    color: #f3c03e
}

igc-icon-button::part(base) {
    background-color: #2c2c2c;
}

igc-icon-button::part(base):hover {
    background-color: #3D4149;
}
css

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

Web Components Navigation Drawer (ナビゲーションドロワー) の概要

Web Components Navigation Drawer の例

使用方法

Navigation Drawer 項目の追加

Navbar の統合

ミニバリアント

スタイル設定

API リファレンス

その他のリソース

Web Components Navigation Drawer (ナビゲーション ドロワー) の概要

Web Components Navigation Drawer の例

使用方法

Navigation Drawer 項目の追加

Navbar の統合

ミニ バリアント

スタイル設定

API リファレンス

その他のリソース

Web Components Navigation Drawer (ナビゲーションドロワー) の概要

ミニバリアント