Descripción general del componente del cajón de navegación de Angular
El componente Ignite UI for Angular panel lateral de navegación es un contenedor de navegación lateral. Puede descansar sobre el contenido y deslizarse hacia adentro o fuera de la vista o anclarse para expandirse o contraerse dentro del contenido. Una versión mini proporciona un acceso rápido a la navegación incluso cuando está cerrada. El cajón de navegación cuenta con selección de modo de respuesta y gestos táctiles. El contenido es completamente personalizable y puede hacer uso del estilo predeterminado de los elementos del menú.
Ejemplo de Angular cajón de navegación
Introducción a Ignite UI for Angular cajón de navegación
Para empezar a utilizar el componente Ignite UI for Angular cajón de navegación, 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 al Ignite UI for Angular, lea el tema de introducción.
El primer paso es importar elIgxNavigationDrawerModule interior de nuestro archivo app.module.ts.
Nota
TambiénIgxNavigationDrawerComponent depende de yBrowserAnimationsModule opcionalmenteHammerModule para las interacciones táctiles, así que también deben añadirse al AppModule:
// 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 puedes importarlosIgxNavigationDrawerComponent como una dependencia independiente, o usar elIGX_NAVIGATION_DRAWER_DIRECTIVES token 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 } 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[];
}
Ahora que tienes importado el módulo o las directivas del cajón de navegación Ignite UI for Angular, puedes empezar a usar eligx-nav-drawer componente.
Uso del cajón de navegación Angular
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 mediante<ng-template> una directiva decoradaigxDrawer. Aunque cualquier contenido puede proporcionarse en la plantilla, laigxDrawerItem directiva (véase Estilo de objetos) está disponible para aplicar el estilo de salida a los elementos. La directiva tiene dos@Input propiedades:
activepara estilizar un objeto según la selección seleccionada.isHeaderpara estilizar un elemento como encabezado de grupo, no se puede estar activo.
LaigxRipple directiva completa el aspecto y la sensación:
<!-- 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
igxDrawerMinidirectiva para la variante alternativa de Mini en estado cerrado.
Nota
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 pueden vincularse al estado de la aplicación, al acceso programático a la API del componente usando una@ViewChild(IgxNavigationDrawerComponent) referencia o incluso, en este caso, usando la#drawer variable de referencia de la plantilla:
<button (click)="drawer.toggle()">Menu</button>
El Cajón de Navegación también se integra yigxNavigationService puede ser dirigido por id mediante unaigxToggleAction directiva.
Vamos a sustituir el<main> app.component.html por lo siguiente, añadiendoigxIconButton un componente Icono para estilizar nuestro interruptor:
<main>
<span igxIconButton="flat" igxToggleAction="navigation">
<igx-icon fontSet="material">menu</igx-icon>
</span>
</main>
Además, si quieres que el cajón se cierre al seleccionar un objeto, puedes usar una@ViewChild(IgxNavigationDrawerComponent) referencia así:
/* 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();
}
}
Si todo salió bien, deberías ver la muestra de demostración en tu navegador.
Modos
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.
Nota
Por defecto, el Cajón de Navegación responde, cambiando activamente entre el modo sin fijar y el modo fijado según el tamaño de la pantalla. Este comportamiento está controlado por lapinThreshold propiedad y puede desactivarse estableciendo un valor falso (por ejemplo, 0).
Configuración fijada (persistente)
El pin cambia la posición del cajón defixed arelative para ponerlo en el mismo flujo que el contenido. Por lo tanto, el estilo de la app debería tener en cuenta este tipo de diseño, especialmente si el cajón necesita ser desactivado en este modo. Aunque hay más de una forma de lograr un diseño tan fluido (incluyendo programáticamente), la más sencilla es usandoigxLayout yigxFlex directives.
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 se aplicaflex-basis sobre su elemento anfitrión, permitiendo que el resto del contenido ocupe el ancho restante. Alternativamente, saltándose el uso de directivas, el estilo manual puede aplicarse de forma 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 variante
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 lateral en todo momento, dejando solo los iconos. Esta variante es posible simplemente por la presencia de una mini plantilla alternativa decorada conigxDrawerMini directiva.
La variante mini se usa comúnmente en una configuración persistente, así que hemos establecidopin y desactivado 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>
Uso Angular router
Para usar el router Angular, primero, necesitamos importar git y@angular/router crear una instancia del router en nuestro constructor. Luego tenemos que definir nuestros elementos de navegación usando el router para los 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'
}
];
}
Puedes usarrouterLinkActive donde está asignado a una variable plantilla y suisActive propiedad puede usarse para vincular a laactive entrada en laigxDrawerItem. La<igx-nav-drawer> plantilla serí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>
<!-- ... -->
Por último, importa el RouterModule junto con las rutas de los elementos en tuapp.module.ts archivo:
/*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í:
Navegación jerárquica
Para crear una navegación jerárquica multinivel usando elIgxNavigationDrawerComponent, puedes usar el IgxTreeComponent en laigxDrawer plantilla. El árbol puede construirse directamente desde tu objeto de aplicaciónRoutes. 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>
Nota
En este ejemplo, no estamos usando eligxDrawerItem, sino que estamos poblando directamente con contenido personalizadoigxDrawer, en este caso usando unigx-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, estamos poblando las rutas con enrutamientodata personalizado, que contiene unadisplayName propiedad usada para visualizar el texto de enlace en losigx-tree nodos. Un ejemploRoute se ve así:
export const menusRoutes: Routes = [
{
component: NavDrawerHierarchicalComponent,
path: 'navigation-drawer-hierarchical',
data: { displayName: 'Hierarchical Drawer Menu' },
},
];
También hay enrutamiento hijo extraído de lachildren propiedad de las rutas. El ejemplo muestra dos niveles de jerarquía, pero si tu enrutamiento tiene más, entonces solo necesitas definir los niveles por debajo del segundo en las plantillas de nodos del árbol.
Nota
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 empezar a estilizar el cajón de navegación, necesitamos importar elindex archivo, donde están todas las funciones de tema y los componentes mezclados:
@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 sencillo, creamos un nuevo tema que extiende ynavdrawer-theme acepta algunos parámetros que estilizan los elementos del navdrawer:
$custom-theme: navdrawer-theme(
$background: #2d313a,
$item-active-background: #ecc256,
$item-header-text-color: #ecc256,
);
Como se ha visto, exponenavdrawer-theme algunos parámetros útiles para el estilo básico de sus elementos.
El último paso es incluir el tema del componente en nuestra aplicación.
@include css-vars($custom-theme);
Nota
Si el componente utiliza unaEmulated ViewEncapsulation, es necesario quepenetrate esta encapsulación use::ng-deep para aplicar los estilos.
:host {
::ng-deep {
@include css-vars($custom-theme);
}
}
API y referencias de estilo
GitHub