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 o IgxNavigationDrawerModule dentro do nosso arquivo app.module.ts.

    Note

    O IgxNavigationDrawerComponent também depende do BrowserAnimationsModule e, opcionalmente, do HammerModule para interações por toque, então eles também precisam ser adicionados ao AppModule:

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

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

    Como alternativa, a partir da 16.0.0 você pode importar o IgxNavigationDrawerComponent como uma dependência autônoma ou usar o token IGX_NAVIGATION_DRAWER_DIRECTIVES 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, IgxRippleDirective, IgxIconComponent } from 'igniteui-angular';
// 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 Ignite UI for Angular Navigation Drawer ou as diretivas, você pode começar a usar o componente igx-nav-drawer.

    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 para a gaveta deve ser fornecido via <ng-template> decorado com a diretiva igxDrawer. Embora qualquer conteúdo possa ser fornecido no modelo, a diretiva igxDrawerItem (veja Estilo de item) está disponível para aplicar estilo pronto para uso aos itens. A diretiva tem duas propriedades @Input:

    • active para estilizar um item conforme selecionado.
    • isHeader para estilizar um item como um cabeçalho de grupo não pode estar ativo.

    A diretiva igxRipple completa a aparência:

    <!-- 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 com a diretiva igxDrawerMini pode ser fornecido para a variante Mini alternativa 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 aplicativo, acesso programático à API no componente usando um @ViewChild(IgxNavigationDrawerComponent) referência ou mesmo neste caso usando o #drawer variável de referência de modelo:

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

    A Gaveta de Navegação também se integra com igxNavigationService e pode ser segmentada por id com uma diretiva igxToggleAction.

    Vamos substituir o <main> em app.component.html pelo seguinte, adicionando igxIconButton e o componente Icon 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 quando selecionar um item dela, você pode usar uma referência @ViewChild(IgxNavigationDrawerComponent) como esta:

    /* app.component.ts */
import { Component, ViewChild } from '@angular/core';
import { IgxNavigationDrawerComponent } from 'igniteui-angular';
// 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, o Navigation Drawer é responsivo, mudando ativamente entre o modo não fixado e fixado com base no tamanho da tela. Esse comportamento é controlado pela propriedade pinThreshold e pode ser desabilitado definindo um valor falso (por exemplo, 0).

    Pinned (persistent) setup

    Pin altera a posição da gaveta de fixed para relative para colocá-la no mesmo fluxo que o conteúdo. Portanto, o estilo do aplicativo deve levar em conta esse layout, especialmente se a gaveta precisar ser alternada nesse modo. Embora haja mais de uma maneira de obter esse layout fluido (incluindo programaticamente), a maneira mais fácil é usar as diretivas igxLayout e igxFlex.

    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 aplica flex-basis em seu elemento host, permitindo que o restante do conteúdo ocupe a largura restante. Alternativamente, pulando as diretivas using, o estilo manual pode ser aplicado similar 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 variante mini, a Gaveta de Navegação muda sua largura em vez de fechar. Mais comumente usada para manter a seleção rápida disponível na lateral o tempo todo, deixando apenas os ícones. Esta variante é habilitada simplesmente pela presença de um mini template alternativo decorado com a diretiva igxDrawerMini.

    A variante mini é comumente usada em uma configuração persistente, então definimos pin e desabilitamos o limite de resposta:

    <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 git de @angular/router e criar uma instância do router em nosso construtor. Então temos que definir nossos itens de navegação usando o router para seus valores de link.

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

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

    Você pode usar routerLinkActive onde ele é atribuído a uma variável de modelo e sua propriedade isActive pode ser usada para vincular à entrada active no igxDrawerItem. O modelo <igx-nav-drawer> ficaria 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 seu arquivo app.module.ts:

    /*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 o IgxNavigationDrawerComponent, você pode usar o IgxTreeComponent no template igxDrawer. A árvore pode ser construída diretamente do objeto Routes do seu aplicativo. 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 o igxDrawerItem, em vez disso, estamos preenchendo diretamente com conteúdo igxDrawer personalizado, neste caso usando um igx-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 data de roteamento personalizados, que contêm uma propriedade displayName, usada para visualizar o texto do link nos nós igx-tree. Uma Route de exemplo se parece com isso:

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

    Há também roteamento filho extraído da propriedade children das rotas. O exemplo mostra dois níveis de hierarquia, mas se seu roteamento tiver mais, então tudo o que você precisa fazer é definir os níveis abaixo do segundo nos modelos de nó de á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 o arquivo index, onde todas as funções do tema e mixins de componentes estão localizados:

    @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 o navdrawer-theme e 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, o navdrawer-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 um Emulated ViewEncapsulation, é necessário penetrate nesse encapsulamento usando::ng-deep para aplicar os estilos.

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

    API and Style References