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

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

    Web Components Navigation Drawer Example

    Este ejemplo demuestra cómo crear el componente IgcNavDrawerComponent.

    Usage

    Primero, debe instalar la Ignite UI for Web Components ejecutando el siguiente comando:

    npm install igniteui-webcomponents

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

defineComponents(IgcNavDrawerComponent);

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

    Adding Navigation Drawer Items

    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>

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

    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>

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

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

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

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

    Mini Variant

    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>

    Y aquí está el resultado:

    Styling the Navigation Drawer

    El componente del cajón de navegación expone varias partes CSS: base, main y mini. El componente del elemento del cajón de navegación también expone tres partes CSS: base, icon y content, lo que le brinda control total sobre su estilo.

    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