Descripción general del componente del cajón de navegación Angular
El componente Ignite UI for Angular Navigation Drawer es un contenedor de navegación lateral. Puede descansar sobre el contenido y deslizarse hacia afuera o hacia afuera de la vista o fijarse para expandirse o contraerse dentro del contenido. Una versión mini proporciona acceso rápido a la navegación incluso cuando está cerrada. El cajón de navegación presenta selección de modo responsivo y gestos táctiles. El contenido es completamente personalizable y puede utilizar el estilo predeterminado de los elementos del menú.
Angular Navigation Drawer Example
Getting Started with Ignite UI for Angular Navigation Drawer
Para comenzar con el componente Ignite UI for Angular Navigation Drawer, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:
ng add igniteui-angular
Para obtener una introducción completa a la Ignite UI for Angular, lea el tema de introducción.
El primer paso es importar IgxNavigationDrawerModule dentro de nuestro archivo app.module.ts.
Note
IgxNavigationDrawerComponent también depende de BrowserAnimationsModule y HammerModule para interacciones táctiles, por lo que también deben agregarse a 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 {}
Alternativamente, a partir de 16.0.0, puede importar IgxNavigationDrawerComponent como una dependencia independiente o usar el token IGX_NAVIGATION_DRAWER_DIRECTIVES para importar el componente y todos sus componentes y directivas de soporte.
// 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 [];
}
Ahora que tiene importadas las directivas o el módulo Ignite UI for Angular Navigation Drawer, puede comenzar a usar el componente igx-nav-drawer.
Using the Angular Navigation Drawer
Con las dependencias importadas, el cajón de navegación se puede definir en la plantilla del componente de la aplicación:
<igx-nav-drawer id="navdrawer" [isOpen]="true">
<!-- template(s) -->
</igx-nav-drawer>
El contenido del cajón debe proporcionarse a través de <ng-template> decorado con la directiva igxDrawer. Si bien se puede proporcionar cualquier contenido en la plantilla, la directiva igxDrawerItem (consulte Estilo de elemento) está disponible para aplicar estilos listos para usar a los elementos. La directiva tiene dos propiedades @Input:
activepara aplicar estilo a un elemento según lo seleccionado.isHeaderpara diseñar un elemento como encabezado de grupo, no puede estar activo.
La directiva igxRipple completa la apariencia:
<!-- 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>
Se puede proporcionar una plantilla adicional decorada con la directiva
igxDrawerMinipara la variante Mini alternativa en estado cerrado.
Note
El cajón de navegación puede flotar sobre el contenido o fijarse junto a él. De forma predeterminada, el cajón cambia entre esos modos según el tamaño de la ventana gráfica. Consulte Modos para obtener más información.
Para adaptarse a los modos de cambio de cajón, se puede diseñar una envoltura flexible simple alrededor de las dos secciones de contenido de la siguiente manera:
/* app.component.css */
.content-wrap
{
width: 100%;
height: 100%;
display: flex;
}
Para agregar elementos a nuestro cajón de navegación y poder seleccionarlos, nuestro archivo mecanografiado debería verse así:
/* app.component.ts */
@Component({...})
export class AppComponent {
public navItems = [
{ name: 'account_circle', text: 'Avatar' },
...
];
public selected = 'Avatar';
public navigate(item) {
this.selected = item.text;
}
}
Hay varias formas de abrir y cerrar el cajón. Las propiedades de entrada se pueden vincular al estado de la aplicación, el acceso programático a la API en el componente mediante un @ViewChild(IgxNavigationDrawerComponent) referencia o incluso en este caso utilizando el #drawer variable de referencia de plantilla:
<button (click)="drawer.toggle()"> Menu </button>
El cajón de navegación también se integra con igxNavigationService y puede ser dirigido por id con una directiva igxToggleAction.
Reemplacemos el <main> en app.component.html con lo siguiente, agregando igxIconButton un componente Icon para diseñar nuestro conmutador:
<main>
<span igxIconButton="flat" igxToggleAction="navigation">
<igx-icon fontSet="material">menu</igx-icon>
</span>
</main>
Además, si desea que el cajón se cierre cuando seleccione un elemento, puede usar una referencia @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();
}
}
Si todo salió bien, deberías ver la muestra de demostración en tu navegador.
Modes
El modo sin fijar (elevado por encima del contenido) es el comportamiento normal en el que el cajón se sitúa encima y aplica una superposición oscura sobre el contenido. Generalmente se utiliza para proporcionar navegación temporal adecuada para dispositivos móviles.
El cajón se puede fijar para aprovechar pantallas más grandes, colocándolo dentro del flujo de contenido normal con una posición relativa. Dependiendo de si la aplicación proporciona una forma de alternar el cajón, el modo fijado se puede utilizar para lograr un comportamiento permanente o persistente.
Note
De forma predeterminada, el cajón de navegación responde y cambia activamente entre el modo anclado y anclado según el tamaño de la pantalla. Este comportamiento está controlado por la propiedad pinThreshold y se puede desactivar estableciendo un valor falso (por ejemplo, 0).
Pinned (persistent) setup
Pin cambia la posición del cajón de fixed a relative para ponerlo en el mismo flujo que el contenido. Por lo tanto, el estilo de la aplicación debe tener en cuenta dicho diseño, especialmente si es necesario alternar el cajón en este modo. Si bien hay más de una forma de lograr un diseño tan fluido (incluso mediante programación), la forma más sencilla es utilizar las directivas igxLayout e igxFlex.
Así es como se vería aplicado al ejemplo 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;
}
Ahora el ejemplo modificado debería verse así:
El cajón aplica flex-basis en su elemento anfitrión, permitiendo que el resto del contenido ocupe el ancho restante. Alternativamente, omitiendo el uso de directivas, se puede aplicar un estilo manual 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
Con la variante mini, el cajón de navegación cambia su ancho en lugar de cerrarse. Se usa más comúnmente para mantener la selección rápida disponible en el costado en todo momento, dejando solo los íconos. Esta variante se habilita simplemente por la presencia de una mini plantilla alternativa decorada con la directiva igxDrawerMini.
La variante mini se usa comúnmente en una configuración persistente, por lo que configuramos pin y deshabilitamos el umbral de respuesta:
<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 Angular Router, primero debemos importar git desde @angular/router y crear una instancia del enrutador en nuestro constructor. Luego tenemos que definir nuestros elementos de navegación utilizando el enrutador para sus valores de enlace.
/* app.component.ts */
...
export class AppComponent {
public componentLinks = [
{
link: 'avatar',
name: 'Avatar'
},
{
link: 'badge',
name: 'Badge'
},
{
link: 'button-group',
name: 'Button Group'
}
];
}
Puede usar routerLinkActive donde se asigna a una variable de plantilla y su propiedad isActive se puede usar para vincular a la entrada active en igxDrawerItem. La plantilla <igx-nav-drawer> se vería así:
/* 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>
<!-- ... -->
Finalmente, importe el RouterModule junto con las rutas de los elementos en su archivo 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}
])
]
])
Una vez completados todos los pasos anteriores, su aplicación debería verse así:
Hierarchical Navigation
Para crear una navegación jerárquica de varios niveles usando IgxNavigationDrawerComponent, puede usar IgxTreeComponent en la plantilla igxDrawer. El árbol se puede construir directamente desde el objeto Routes de su aplicación. Así es como se puede lograr esto:
<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
En este ejemplo, no usamos igxDrawerItem, sino que completamos directamente con contenido personalizado igxDrawer, en este caso usando un 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;
}
En este ejemplo, completamos las rutas con data de ruta personalizados, que contienen una propiedad displayName, utilizada para visualizar el texto del enlace en los nodos igx-tree. Una Route de muestra se ve así:
export const menusRoutes: Routes = [
{
component: NavDrawerHierarchicalComponent,
path: 'navigation-drawer-hierarchical',
data: { displayName: 'Hierarchical Drawer Menu' }
}
];
También hay rutas secundarias extraídas de la propiedad children de las rutas. El ejemplo muestra dos niveles de jerarquía, pero si su enrutamiento tiene más, entonces todo lo que necesita hacer es definir los niveles debajo del segundo en las plantillas de nodos del árbol.
Note
Tenga en cuenta que algunas rutas, como la redirección de ruta vacía, la ruta de error, la página no encontrada, etc., pueden no ser adecuadas para la visualización directa. Antes de vincular el árbol al objeto de enrutamiento, puede eliminar esas rutas de su objeto en la lógica de su componente.
El siguiente ejemplo presenta las capacidades de una estructura jerárquica mediante el uso de datos predefinidos con nombres de temas y enlaces. La estructura permite a los usuarios generar fácilmente navegaciones funcionales y detalladas y tener la capacidad de definir cada elemento si se mostrará como un enlace o como un indicador.
Estilismo
Para comenzar a diseñar el cajón de navegación, necesitamos importar el archivo index, donde se encuentran todas las funciones del tema y los mixins de componentes:
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
Siguiendo el enfoque más simple, creamos un nuevo tema que extiende el navdrawer-theme y acepta algunos parámetros que dan estilo a los elementos del cajón de navegación:
$custom-theme: navdrawer-theme(
$background: #2d313a,
$item-active-background: #ecc256,
$item-header-text-color: #ecc256
);
Como se ve, el navdrawer-theme expone algunos parámetros útiles para el estilo básico de sus elementos.
Including themes
El último paso es incluir el tema del componente en nuestra aplicación.
Si $legacy-support está configurado en true, incluya el tema del componente así:
@include navdrawer($custom-theme);
Note
Si el componente utiliza una ViewEncapsulation Emulated, es necesario penetrate esta encapsulación usando::ng-deep
:host {
::ng-deep {
@include navdrawer($custom-theme);
}
}
Si $legacy-support está configurado en false (predeterminado), incluya las variables CSS del componente así:
@include css-vars($custom-theme);
Note
Si el componente utiliza una ViewEncapsulation Emulated, aún debe usar:host porque necesita un selector global para anular las variables.
:host {
@include css-vars($custom-theme);
}
API and Style References
GitHub