Visão geral da gaveta de navegação do React

    A gaveta de navegação Ignite UI for React fornece navegação lateral que pode ser expandida ou recolhida no conteúdo. Uma versão mini fornece acesso rápido à navegação, mesmo quando fechada. Seu conteúdo é totalmente personalizável, além de fornecer o estilo padrão do item de menu.

    React Navigation Drawer Example

    Este exemplo demonstra como criarIgrNavDrawer componentes.

    Usage

    Primeiro, você precisa instalar o pacote npm Ignite UI for React correspondente executando o seguinte comando:

    npm install igniteui-react

    Você então precisará importar oIgrNavDrawer CSS necessário e registrar seu módulo, assim:

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

    Para uma introdução completa ao Ignite UI for React, leia o tópico Comecando.

    Adding Navigation Drawer Items

    A maneira mais simples de começar a usar oIgrNavDrawer é a seguinte:

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

    Se tudo correr bem, você deverá ver o seguinte no seu navegador:

    Embora qualquer conteúdo possa ser fornecido na gaveta, eleIgrNavDrawerItem está disponível para aplicar um estilo pronto para uso nos itens.

    Para aprimorar um pouco nosso componente, podemos usá-lo em conjunto com oIgrNavbar. Dessa forma, podemos alcançar um visual mais completo e usar os métodos do desenhador. Vamos ver como podemos usar isso no próximo exemplo:

    <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 também adicionar alguns botões de acesso para exibir todosposition os valores. Assim, sempre que um for selecionado, mudamos a posição da gaveta.

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

    E, finalmente, precisamos de uma maneira de abrir e fechar nossa gaveta de navegação. Há algumas maneiras de fazer isso, mas para o propósito deste exemplo, faremos o seguinte:

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

    Se tudo correr bem, seu componente deverá ficar assim:

    Mini Variant

    Com a versão mini, a Gaveta de Navegação muda sua largura em vez de fechar. Ele é usado para manter uma navegação rápida, disponível o tempo todo, deixando apenas os ícones. Para isso, basta configurar amini ranhura da gaveta.

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

    E aqui está o resultado:

    Styling

    EleIgrNavDrawer expõe várias partes do CSS -base,main, emini, dando controle total sobre o estilo deles.

    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