Visão geral da gaveta de navegação Web Components

    O Ignite UI for Web Components Navigation Drawer fornece navegação lateral que pode ser expandida ou recolhida dentro do conteúdo. Uma versão mini fornece acesso rápido à navegação mesmo quando fechada. Seu conteúdo é completamente personalizável, ao mesmo tempo em que fornece estilo de item de menu padrão.

    Web Components Navigation Drawer Example

    Este exemplo demonstra como criar o componente IgcNavDrawerComponent.

    Usage

    Primeiro, você precisa instalar o Ignite UI for Web Components executando o seguinte comando:

    npm install igniteui-webcomponents

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

defineComponents(IgcNavDrawerComponent);

    Para uma introdução completa ao Ignite UI for Web Components, leia o tópico Introdução.

    Adding Navigation Drawer Items

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

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

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

    Embora qualquer conteúdo possa ser fornecido na gaveta, o IgcNavDrawerItemComponent está disponível para aplicar estilos prontos para uso aos itens.

    Para melhorar um pouco nosso componente, podemos usá-lo em conjunto com o IgcNavbarComponent. Dessa forma, podemos obter uma aparência mais completa e usar os métodos do draw. Vamos ver como podemos usar isso no próximo exemplo:

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

    Vamos também adicionar alguns botões de opção para exibir todos os valores position. Dessa forma, sempre que um for selecionado, mudaremos a posição da gaveta.

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

    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:

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

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

    Mini Variant

    Com a variante mini, a Gaveta de Navegação muda sua largura em vez de fechar. Ela é usada para manter uma navegação rápida, disponível a todo momento, deixando apenas os ícones. Para conseguir isso, você só precisa configurar o mini slot da gaveta.

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

    E aqui está o resultado:

    Styling

    The IgcNavDrawerComponent exposes several CSS parts - base, main, and mini, giving you full control over their styling.

    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