Web Components NavDrawer

El Ignite UI for Web Components panel lateral de navegación proporciona navegación lateral que se puede expandir o contraer dentro del contenido. Una versión mini proporciona un acceso rápido a la navegación incluso cuando está cerrada. Su contenido es completamente personalizable y, al mismo tiempo, proporciona un estilo de elemento de menú predeterminado.

Este ejemplo demuestra cómo crear el componente 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

¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

Uso

En primer lugar, debe instalar el Ignite UI for Web Components ejecutando el siguiente comando:

npm install igniteui-webcomponents
cmd

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

defineComponents(IgcNavDrawerComponent);
ts

Para obtener una introducción completa a Ignite UI for Web Components, lea el tema Primeros pasos.

La forma más sencilla de empezar a utilizar IgcNavDrawerComponent es la siguiente:

<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

Si todo ha ido bien deberías ver lo siguiente en tu navegador:

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

Si bien se puede proporcionar cualquier contenido en el cajón, IgcNavDrawerItemComponent está disponible para aplicar estilos listos para usar a los elementos.

Para mejorar un poco nuestro componente, podemos usarlo junto con IgcNavbarComponent. De esta forma podemos conseguir un look más completo y utilizar los métodos del cajón. Veamos cómo podemos usar esto en el siguiente ejemplo:

<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

También agreguemos algunos botones de opción para mostrar todos los valores position. De esta manera cada vez que seleccionemos uno cambiaremos la posición del cajón.

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

Y finalmente, necesitamos una forma de abrir y cerrar nuestro cajón de navegación. Hay un par de formas de lograr esto, pero para este ejemplo haremos lo siguiente:

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

Si todo va bien, su componente debería verse así:

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

Minivariante

Con la variante mini, el cajón de navegación cambia su ancho en lugar de cerrarse. Sirve para mantener una navegación rápida, disponible en todo momento, dejando sólo los iconos. Para lograrlo, sólo necesitas configurar la mini ranura del cajón.

<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

Y aquí está el resultado:

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

Estilo

El IgcNavDrawerComponent expone varias partes CSS -base, main, y mini, dándole control total sobre su estilo.

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

Descripción general del cajón de navegación de Web Components

Ejemplo de Web Components cajón de navegación

Uso

Agregar elementos del cajón de navegación

Integración de la barra de navegación

Minivariante

Estilo

Referencias de API

Recursos adicionales