Descripción general del cajón de navegación de React

    El Ignite UI for React 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.

    React Navigation Drawer Example

    Este ejemplo demuestra cómo crearIgrNavDrawer componentes.

    Usage

    Primero, debes instalar el paquete npm Ignite UI for React correspondiente ejecutando el siguiente comando:

    npm install igniteui-react

    Luego tendrás que importar elIgrNavDrawer CSS necesario y registrar su módulo, así:

    import { IgrNavDrawer, IgrNavDrawerHeaderItem, IgrNavDrawerItem } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

    Para una introducción completa al Ignite UI for React, lee el tema Empezar.

    Adding Navigation Drawer Items

    La forma más sencilla de empezar a usar elIgrNavDrawer uso es la siguiente:

    <IgrNavDrawer open={true}>
    <IgrNavDrawerHeaderItem>
        <span>Sample Drawer</span>
    </IgrNavDrawerHeaderItem>
    <IgrNavDrawerItem>
        <div slot="icon">
            <IgrIcon name="home" collection="material" />
        </div>
        <span slot="content">Home</span>
    </IgrNavDrawerItem>
    <IgrNavDrawerItem>
        <div slot="icon">
            <IgrIcon name="search" collection="material" />
        </div>
        <span slot="content">Search</span>
    </IgrNavDrawerItem>
</IgrNavDrawer>

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

    Aunque cualquier contenido puede incluirse en el cajón, estáIgrNavDrawerItem disponible para aplicar un estilo de diseño original a los artículos.

    Para mejorar un poco nuestro componente, podemos usarlo junto con elIgrNavbar. De este modo podemos lograr un aspecto más completo y utilizar los métodos del cajón. Veamos cómo podemos usar esto en el siguiente ejemplo:

    <IgrNavbar>
    <div slot="start">
        <IgrIcon name="menu" collection="material"/>
    </div>
    <h2>Home</h2>
</IgrNavbar>

<IgrNavDrawer>
    <IgrNavDrawerHeaderItem>
        <span>Sample Drawer</span>
    </IgrNavDrawerHeaderItem>
    <IgrNavDrawerItem>
        <div slot="icon">
            <IgrIcon name="home" collection="material" />
        </div>
        <span slot="content">Home</span>
    </IgrNavDrawerItem>
    <IgrNavDrawerItem>
        <div slot="icon">
            <IgrIcon name="search" collection="material" />
        </div>
        <span slot="content">Search</span>
    </IgrNavDrawerItem>
</IgrNavDrawer>

    Vamos también a añadir algunos botones de radio para mostrar todos losposition valores. Así, cada vez que se selecciona uno, cambiamos la posición del cajón.

    <IgrRadioGroup alignment="horizontal">
    <IgrRadio value="start" labelPosition="after" checked={this.state.drawerPosition === "start"} onChange={this.onRadioChange}>
        <span>Start</span>
    </IgrRadio>
    <IgrRadio value="end" labelPosition="after" checked={this.state.drawerPosition === "end"} onChange={this.onRadioChange}>
        <span>End</span>
    </IgrRadio>
    <IgrRadio value="top" labelPosition="after" checked={this.state.drawerPosition === "top"} onChange={this.onRadioChange}>
        <span>Top</span>
    </IgrRadio>
    <IgrRadio value="bottom" labelPosition="after" checked={this.state.drawerPosition === "bottom"} onChange={this.onRadioChange}>
        <span>Bottom</span>
    </IgrRadio>
</IgrRadioGroup>

<IgrNavDrawer position={this.state.drawerPosition} />

public onRadioChange(e: IgrRadioChangeEventArgs) {
    if (e.checked == true) {
        this.setState({ drawerPosition: e.detail.value });
    }
}

    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:

    public onMenuIconClick() {
    if (this.navDrawerRef) {
        this.navDrawerRef.show();
    }
}

    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. Se utiliza para mantener una navegación rápida, disponible en todo momento, dejando solo los iconos. Para lograrlo, solo necesitas configurar lamini ranura del cajón.

    <IgrNavDrawer>
    <IgrNavDrawerItem>
        <div slot="icon">
            <IgrIcon name="home" collection="material" />
        </div>
        <span slot="content">Home</span>
    </IgrNavDrawerItem>
    <IgrNavDrawerItem>
        <div slot="icon">
            <IgrIcon name="search" collection="material"/>
        </div>
        <span slot="content">Search</span>
    </IgrNavDrawerItem>
    <div slot="mini">
        <IgrNavDrawerItem>
            <div slot="icon">
                <IgrIcon name="home" collection="material"/>
            </div>
        </IgrNavDrawerItem>
        <IgrNavDrawerItem>
            <div slot="icon">
                <IgrIcon name="search" collection="material" />
            </div>
        </IgrNavDrawerItem>
    </div>
</IgrNavDrawer>

<IgrButton clicked={this.onButtonClick}>
    <span>Toggle</span>
</IgrButton>

    Y aquí está el resultado:

    Styling

    ExponeIgrNavDrawer varias partes CSS -base,main, ymini te da 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);
}

    API References

    Additional Resources