Visão geral do componente de gaveta de navegação Angular

O componente Ignite UI for Angular Navigation Drawer é um contêiner de navegação lateral. Ele pode ficar acima do conteúdo e deslizar para dentro/fora da visualização ou ser fixado para expandir/recolher dentro do conteúdo. Uma versão mini fornece acesso rápido à navegação, mesmo quando fechada. O Navigation Drawer apresenta seleção de modo responsivo e gestos de toque. O conteúdo é completamente personalizável e pode fazer uso do estilo de item de menu padrão.

Angular Navigation Drawer Example

Getting Started with Ignite UI for Angular Navigation Drawer

Para começar a usar o componente Ignite UI for Angular Navigation Drawer, primeiro você precisa instalar Ignite UI for Angular. Em um aplicativo Angular existente, digite o seguinte comando:

ng add igniteui-angular

Para obter uma introdução completa ao Ignite UI for Angular, leia o tópico de introdução.

O primeiro passo é importar oIgxNavigationDrawerModule arquivo de app.module.ts dentro do nosso arquivo.

Note

TambémIgxNavigationDrawerComponent depende doBrowserAnimationsModule e opcionalmente​HammerModule do para interações por toque, então eles precisam ser adicionados ao AppModule também:

// app.module.ts
...
import { HammerModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IgxNavigationDrawerModule } from 'igniteui-angular/navigation-drawer';
// import { IgxNavigationDrawerModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., BrowserAnimationsModule, HammerModule, IgxNavigationDrawerModule],
    ...
})
export class AppModule {}

Alternativamente,16.0.0 você pode importarIgxNavigationDrawerComponent como uma dependência independente ou usar oIGX_NAVIGATION_DRAWER_DIRECTIVES token para importar o componente e todos os seus componentes e diretivas de suporte.

// home.component.ts

import { HammerModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgFor } from '@angular/common';
import { IGX_NAVIGATION_DRAWER_DIRECTIVES } from 'igniteui-angular/navigation-drawer';
import { IgxRippleDirective } from 'igniteui-angular/directives';
import { IgxIconComponent } from 'igniteui-angular/icon';
// import { IGX_NAVIGATION_DRAWER_DIRECTIVES, IgxRippleDirective, IgxIconComponent } from '@infragistics/igniteui-angular'; for licensed package

@Component({
  selector: 'app-home',
  template: `
    <div class="content-wrap">
      <igx-nav-drawer [isOpen]="true">
        <ng-template igxDrawer>
          <nav>
            <span igxDrawerItem [isHeader]="true">Components</span>
            <span
              *ngFor="let item of navItems"
              igxDrawerItem
              [active]="item.text === selected"
              igxRipple
              (click)="navigate(item)"
            >
              <igx-icon fontSet="material">{{ item.name }}</igx-icon>
              <span>{{ item.text }}</span>
            </span>
          </nav>
        </ng-template>
      </igx-nav-drawer>
      <main>
        <!-- app content -->
      </main>
    </div>
  `,
  styleUrls: ['home.component.scss'],
  standalone: true,
  imports: [BrowserAnimationsModule, HammerModule, IGX_NAVIGATION_DRAWER_DIRECTIVES, IgxRippleDirective, IgxIconComponent, NgFor],
  /* or imports: [BrowserAnimationsModule, HammerModule, IgxNavigationDrawerComponent, IgxNavDrawerTemplateDirective, IgxNavDrawerItemDirective, IgxIconComponent, IgxRippleDirective, NgFor] */
})
export class HomeComponent {
  public navItems: Product[];
}

Agora que você importou o módulo ou diretivas Ignite UI for Angular Navigation Drawer, pode começar a usar oigx-nav-drawer componente.

Using the Angular Navigation Drawer

Com as dependências importadas, a Gaveta de Navegação pode ser definida no modelo do componente do aplicativo:

<igx-nav-drawer id="navdrawer" [isOpen]="true">
  <!-- template(s) -->
</igx-nav-drawer>

O conteúdo da gaveta deve ser fornecido por<ng-template> meio de decoração comigxDrawer diretiva. Embora qualquer conteúdo possa ser fornecido no modelo, aigxDrawerItem diretriz (veja Estilo do item) está disponível para aplicar o estilo pronto para uso dos itens. A diretiva possui duas@Input propriedades:

• activepara estilizar um item conforme selecionado.
• isHeaderpara estilizar um item como cabeçalho de grupo, não pode ser ativa.

AigxRipple diretriz completa o visual e a sensação:

<!-- app.component.html -->
<div class="content-wrap">
  <igx-nav-drawer id="navigation" #drawer [isOpen]="true">
    <ng-template igxDrawer>
      <nav>
        <span igxDrawerItem [isHeader]="true">Components</span>
        <span *ngFor="let item of navItems" igxDrawerItem [active]="item.text === selected" igxRipple (click)="navigate(item)">
          <igx-icon fontSet="material">{{ item.name }}</igx-icon>
          <span>{{ item.text }}</span>
        </span>
      </nav>
    </ng-template>
  </igx-nav-drawer>
  <main>
    <!-- app content -->
  </main>
</div>

Um modelo adicional decorado comigxDrawerMini diretiva pode ser fornecido para a variante alternativa do Mini como estado fechado.

Note

A Gaveta de Navegação pode flutuar acima do conteúdo ou ser fixada ao lado dele. Por padrão, a gaveta alterna entre esses modos dependendo do tamanho da viewport. Veja Modos para mais informações.

Para acomodar os modos de troca de gaveta, um wrapper flexível simples em torno das duas seções de conteúdo pode ser estilizado assim:

/* app.component.css */
.content-wrap {
  width: 100%;
  height: 100%;
  display: flex;
}

Para adicionar elementos à nossa gaveta de navegação e poder selecioná-los, nosso arquivo TypeScript deve ficar assim:

/* app.component.ts */
@Component({...})
export class AppComponent {
    public navItems = [
        { name: 'account_circle', text: 'Avatar' },
        ...
    ];

    public selected = 'Avatar';

    public navigate(item) {
        this.selected = item.text;
    }
}

Existem várias maneiras de abrir e fechar a gaveta. As propriedades de entrada podem ser vinculadas ao estado do app, ao acesso programático à API no componente usando uma@ViewChild(IgxNavigationDrawerComponent) referência ou até mesmo neste caso usando a#drawer variável de referência do template:

<button (click)="drawer.toggle()">Menu</button>

A Gaveta de Navegação também se integra eigxNavigationService pode ser direcionada por id com umaigxToggleAction diretiva.

Vamos substituir o<main> in app.component.html pelo seguinte, adicionandoigxIconButton um componente Ícone para estilizar nosso toggle:

<main>
  <span igxIconButton="flat" igxToggleAction="navigation">
    <igx-icon fontSet="material">menu</igx-icon>
  </span>
</main>

Além disso, se você quiser que a gaveta feche ao selecionar um item dela, pode usar uma@ViewChild(IgxNavigationDrawerComponent) referência assim:

/* app.component.ts */
import { Component, ViewChild } from '@angular/core';
import { IgxNavigationDrawerComponent } from 'igniteui-angular/navigation-drawer';
// import { IgxNavigationDrawerComponent } from '@infragistics/igniteui-angular'; for licensed package

@Component({...})
export class AppComponent  {
    @ViewChild(IgxNavigationDrawerComponent, { static: true })
    public drawer: IgxNavigationDrawerComponent;

    // And of course add the key line to our navigate function

    public navigate(item) {
        this.selected = item.text;
        this.drawer.close();
    }
}

Se tudo correr bem, você deverá ver o exemplo de demonstração no seu navegador.

Modes

O modo Unpinned (elevado acima do conteúdo) é o comportamento normal em que a gaveta fica acima e aplica uma sobreposição escurecida sobre o conteúdo. Geralmente usado para fornecer navegação temporária adequada para dispositivos móveis.

A gaveta pode ser fixada para aproveitar telas maiores, colocando-a dentro do fluxo de conteúdo normal com posição relativa. Dependendo se o aplicativo fornece uma maneira de alternar a gaveta, o modo fixado pode ser usado para obter comportamento permanente ou persistente.

Note

Por padrão, a Gaveta de Navegação responde, alternando ativamente entre o modo sem fixação e o modo fixado conforme o tamanho da tela. Esse comportamento é controlado pelapinThreshold propriedade e pode ser desativado definindo um valor falso (por exemplo, 0).

Pinned (persistent) setup

O pino muda a posição da gaveta defixed pararelative colocá-la no mesmo fluxo que o conteúdo. Portanto, o estilo do app deve considerar esse layout, especialmente se a gaveta precisar ser alternada nesse modo. Embora existam mais de uma maneira de alcançar um layout tão fluido (inclusive programaticamente), a maneira mais fácil é usandoigxLayout diretivas eigxFlex emissoras.

Veja como isso ficaria aplicado ao exemplo anterior:

<div class="content-wrap" igxLayout igxLayoutDir="row">
  <igx-nav-drawer id="navigation" #drawer [isOpen]="true" [pin]="true" [pinThreshold]="0">
    <!-- template(s) -->
  </igx-nav-drawer>
  <main igxFlex>
    <!-- content here -->
  </main>
</div>

.content-wrap {
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Agora o exemplo alterado deve ficar assim:

A gaveta se aplicaflex-basis ao seu elemento hospedeiro, permitindo que o restante do conteúdo ocupe a largura restante. Alternativamente, pulando diretivas, o estilo manual pode ser aplicado de forma semelhante a:

.main {
  position: absolute;
  display: flex;
  flex-flow: row nowrap;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
}

.main > * {
  width: 100%;
}

Mini variant

Com a versão mini, a Gaveta de Navegação muda sua largura em vez de fechar. Mais comumente usado para manter a seleção rápida disponível ao lado o tempo todo, deixando apenas os ícones. Essa variante é viabilizada simplesmente pela presença de um mini modelo alternativo decorado comigxDrawerMini diretiva.

A variante mini é comumente usada em configurações persistentes, então definimospin e desativamos o limiar responsivo:

<igx-nav-drawer id="navigation" [pin]="true" [pinThreshold]="0">
  <ng-template igxDrawer>
    <span *ngFor="let item of navItems" igxDrawerItem [active]="item.text === selected" igxRipple (click)="navigate(item)">
      <igx-icon fontSet="material">{{ item.name }}</igx-icon>
      <span>{{ item.text }}</span>
    </span>
  </ng-template>
  <ng-template igxDrawerMini>
    <span *ngFor="let item of navItems" igxDrawerItem [active]="item.text === selected" igxRipple (click)="navigate(item)">
      <igx-icon fontSet="material">{{ item.name }}</igx-icon>
    </span>
  </ng-template>
</igx-nav-drawer>

Using Angular Router

Para usar o Angular Router, primeiro, precisamos importar o@angular/router git e criar uma instância do roteador no nosso construtor. Depois, precisamos definir nossos itens de navegação usando o roteador para os valores de link deles.

/* app.component.ts */
 ...

export class AppComponent {
    public componentLinks = [
        {
            link: 'avatar',
            name: 'Avatar'
        },
        {
            link: 'badge',
            name: 'Badge'
        },
        {
            link: 'button-group',
            name: 'Button Group'
        }
    ];
}

Você pode usarrouterLinkActive onde ele é atribuído a uma variável template e suaisActive propriedade pode ser usada para vincular àactive entrada naigxDrawerItem. O<igx-nav-drawer> modelo seria assim:

/* app.component.html */

<!-- ... -->
<ng-template igxDrawer>
  <nav>
    <span igxDrawerItem [isHeader]="true">Components</span>

    <span
      *ngFor="let item of componentLinks"
      routerLink="{{item.link}}"
      routerLinkActive
      #rla="routerLinkActive"
      igxDrawerItem
      igxRipple
      [active]="rla.isActive">
       {{item.name}}
    </span>
  </nav>
</ng-template>
<!-- ... -->

Por fim, importe o RouterModule junto com as rotas dos itens no seuapp.module.ts arquivo:

/*app.module.ts*/
import { RouterModule } from '@angular/router';

@NgModule([
    imports: [
        RouterModule,
  RouterModule.forRoot([
            {path: 'avatar', component: NavDrawerRoutingComponent},
            {path: 'badge', component: NavDrawerRoutingComponent},
            {path: 'button-group', component: NavDrawerRoutingComponent}
        ])
    ]
])

Depois que todas as etapas acima forem concluídas, seu aplicativo deverá ficar assim:

Hierarchical Navigation

Para criar uma navegação hierárquica multinível usando oIgxNavigationDrawerComponent template, você pode usar o IgxTreeComponent noigxDrawer template. A árvore pode ser construída diretamente a partir do seu objeto de aplicaçãoRoutes. Veja como isso pode ser alcançado:

<igx-nav-drawer [isOpen]="true" [enableGestures]="true" width="280px">
  <ng-template igxDrawer>
    <igx-tree>
      <igx-tree-node *ngFor="let route of routes">
        <a igxTreeNodeLink [routerLink]="route.path" routerLinkActive="route-selected-class">{{ route.data?.displayName }}</a>
        <igx-tree-node *ngFor="let child of route.children">
          <a igxTreeNodeLink [routerLink]="[route.path, child.path]" routerLinkActive="route-selected-class">{{ child.data?.displayName }}</a>
        </igx-tree-node>
      </igx-tree-node>
    </igx-tree>
  </ng-template>
</igx-nav-drawer>

Note

Neste exemplo, não estamos usando oigxDrawerItem, em vez disso, preenchemos diretamente com conteúdo personalizadoigxDrawer, neste caso usando umigx-tree.

import { menusRoutes } from '../../menus-routing.module';

@Component({
  selector: 'app-nav-drawer-hierarchical',
  templateUrl: './nav-drawer-hierarchical.component.html',
  styleUrls: ['./nav-drawer-hierarchical.component.scss'],
})
export class NavDrawerHierarchicalComponent {
  public routes = menusRoutes;
}

Neste exemplo, estamos preenchendo as rotas com roteamentodata personalizado, que contém umadisplayName propriedade usada para visualizar o texto do link nosigx-tree nós. Um exemploRoute é assim:

export const menusRoutes: Routes = [
  {
    component: NavDrawerHierarchicalComponent,
    path: 'navigation-drawer-hierarchical',
    data: { displayName: 'Hierarchical Drawer Menu' },
  },
];

Também existe o roteamento filho extraído dachildren propriedade das rotas. O exemplo mostra dois níveis de hierarquia, mas se seu roteamento tiver mais, tudo o que você precisa fazer é definir os níveis abaixo do segundo nos templates de nós da árvore.

Note

Tenha em mente que algumas rotas, como redirecionamento de rota vazia, rota de erro, página não encontrada, etc., podem não ser adequadas para visualização direta. Antes de vincular a árvore ao objeto de roteamento, você pode remover essas rotas do seu objeto na lógica do seu componente.

O exemplo abaixo apresenta as capacidades de uma estrutura hierárquica usando dados predefinidos com nomes de tópicos e links. A estrutura permite que os usuários gerem facilmente navegações funcionais e detalhadas e tenham a capacidade de definir cada elemento se deve ser exibido como um link ou como um indicador.

Estilização

Para começar a estilizar a gaveta de navegação, precisamos importar oindex arquivo, onde todas as funções de tema e mixagens de componentes estão ativadas:

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

Seguindo a abordagem mais simples, criamos um novo tema que estende enavdrawer-theme aceita alguns parâmetros que estilizam os itens do navdrawer:

$custom-theme: navdrawer-theme(
  $background: #2d313a,
  $item-active-background: #ecc256,
  $item-header-text-color: #ecc256,
);

Como visto, elenavdrawer-theme expõe alguns parâmetros úteis para o estilo básico de seus itens.

O último passo é incluir o tema do componente em nosso aplicativo.

@include css-vars($custom-theme);

Note

Se o componente estiver usando umEmulated ViewEncapsulation, é necessário quepenetrate esse encapsulamento use::ng-deep para aplicar os estilos.

:host {
  ::ng-deep { 
    @include css-vars($custom-theme);
  }
}

API and Style References

• API do componente IgxNavigationDrawer
• Estilos de componentes IgxNavigationDrawer