Descripción general del componente de navegación inferior Angular
El componente Ignite UI for Angular permite al usuario navegar entre varios paneles de contenido que se muestran en una sola vista. La navegación a través de los paneles se logra con los botones de pestañas ubicados en la parte inferior de su aplicación.
Note
El selector igx-tab-bar está en desuso. Podrías usar igx-bottom-nav en su lugar. La clase IgxTabBarComponent pasa a llamarse IgxBottomNavComponent. IgxTabBarModule pasa a llamarse IgxBottomNavModule.
Angular Bottom Navigation Example
Getting Started with Ignite UI for Angular Bottom Navigation
Para comenzar con el componente Ignite UI for Angular Bottom Navigation, 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 siguiente paso es importar IgxBottomNavModule en su archivo app.module.ts.
// app.module.ts
...
import { IgxBottomNavModule } from 'igniteui-angular';
// import { IgxBottomNavModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxBottomNavModule],
...
})
export class AppModule {}
Alternativamente, a partir de 16.0.0, puede importar IgxBottomNavComponent como una dependencia independiente o usar el token IGX_BOTTOM_NAV_DIRECTIVES para importar el componente y todos sus componentes y directivas de soporte.
// home.component.ts
import { IGX_BOTTOM_NAV_DIRECTIVES, IgxIconComponent } from 'igniteui-angular';
// import { IGX_BOTTOM_NAV_DIRECTIVES, IgxIconComponent } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: `
<igx-bottom-nav>
<igx-bottom-nav-item>
<igx-bottom-nav-header>
<igx-icon>library_music</igx-icon>
</igx-bottom-nav-header>
<igx-bottom-nav-content>This is Item 1 content.</igx-bottom-nav-content>
</igx-bottom-nav-item>
<igx-bottom-nav-item>
<igx-bottom-nav-header>
<igx-icon>video_library</igx-icon>
</igx-bottom-nav-header>
<igx-bottom-nav-content>This is Item 2 content.</igx-bottom-nav-content>
</igx-bottom-nav-item>
<igx-bottom-nav-item>
<igx-bottom-nav-header>
<igx-icon>library_books</igx-icon>
</igx-bottom-nav-header>
<igx-bottom-nav-content>This is Item 3 content.</igx-bottom-nav-content>
</igx-bottom-nav-item>
</igx-bottom-nav>
`,
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IGX_BOTTOM_NAV_DIRECTIVES, IgxIconComponent]
/* or imports: [IgxBottomNavComponent, IgxBottomNavItemComponent, IgxBottomNavHeaderComponent, IgxBottomNavContentComponent, IgxIconComponent] */
})
export class HomeComponent {}
Ahora que tiene importadas la Ignite UI for Angular, puede comenzar a usar el componente igx-bottom-nav.
Using the Angular Bottom Navigation
La plantilla de nuestro componente incluye la navegación inferior y tres elementos. Cada elemento incluye un igx-bottom-nav-header y un componente igx-bottom-nav-content que representan respectivamente el encabezado y el contenedor de los datos. Los encabezados suelen constar de un icono y una etiqueta de texto opcional. El control de navegación inferior es compatible con los íconos de Material Design, por lo que para adoptarlos en su aplicación simplemente agregue la importación de Material+Iconos en su archivo 'styles.css' en la carpeta principal de la aplicación.
Note
Si no ha utilizado el igx-icon en su aplicación hasta ahora, asegúrese de importar IgxIconModule en app.module.ts antes de continuar.
// styles.css
...
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
...
<igx-bottom-nav>
<igx-bottom-nav-item>
<igx-bottom-nav-header>
<igx-icon>library_music</igx-icon>
</igx-bottom-nav-header>
<igx-bottom-nav-content>This is Item 1 content.</igx-bottom-nav-content>
</igx-bottom-nav-item>
<igx-bottom-nav-item>
<igx-bottom-nav-header>
<igx-icon>video_library</igx-icon>
</igx-bottom-nav-header>
<igx-bottom-nav-content>This is Item 2 content.</igx-bottom-nav-content>
</igx-bottom-nav-item>
<igx-bottom-nav-item>
<igx-bottom-nav-header>
<igx-icon>library_books</igx-icon>
</igx-bottom-nav-header>
<igx-bottom-nav-content>This is Item 3 content.</igx-bottom-nav-content>
</igx-bottom-nav-item>
</igx-bottom-nav>
Si todo salió bien, debería ver la muestra de demostración en su navegador.
Customizing Bottom Navigation
Modifiquemos las pestañas agregando etiquetas junto a los íconos y asegurémonos de que los encabezados tengan el estilo adecuado.
Primero, defina algunas matrices de objetos para la fuente de datos en el archivo mecanografiado del componente:
public songsList: object[] = [
{ title: 'Havana', artist: 'Camila Cabello' },
{ title: 'Meant To Be', artist: 'Bebe Rexha & Florida Georgia Line' },
{ title: 'New Rules', artist: 'Dua Lipa' },
{ title: 'Wolves', artist: 'Selena Gomez & Marshmello' }
];
public moviesList: object[] = [
{ title: 'Logan', genre: 'Action, Drama, Sci-Fi' },
{ title: 'Wonder Woman', genre: 'Action, Adventure, Fantasy' },
{ title: 'Guardians of the Galaxy Vol. 2', genre: 'Action, Adventure, Sci-Fi' },
{ title: 'Star Wars: The Last Jedi', genre: 'Action, Adventure, Fantasy' }
];
public booksList: object[] = [
{ title: 'Wonder', author: 'R. J. Palacio' },
{ title: 'Milk and Honey', author: 'Rupi Kaur' },
{ title: 'Giraffes Can\'t Dance', author: 'Jeff Kinne' },
{ title: 'The Getaway', author: 'Selena Gomez & Marshmello' }
];
A continuación, actualice el marcado de plantilla del componente de la siguiente manera:
<igx-bottom-nav>
<igx-bottom-nav-item>
<igx-bottom-nav-header>
<igx-icon igxBottomNavHeaderIcon>library_music</igx-icon>
<span igxBottomNavHeaderLabel>Songs</span>
</igx-bottom-nav-header>
<igx-bottom-nav-content>
<div class="item" *ngFor="let song of songsList">
<span class="item-line1">{{song.title}}</span><br/>
<span class="item-line2">{{song.artist}}</span>
</div>
</igx-bottom-nav-content>
</igx-bottom-nav-item>
<igx-bottom-nav-item>
<igx-bottom-nav-header>
<igx-icon igxBottomNavHeaderIcon>video_library</igx-icon>
<span igxBottomNavHeaderLabel>Movies</span>
</igx-bottom-nav-header>
<igx-bottom-nav-content>
<div class="item" *ngFor="let movie of moviesList">
<span class="item-line1">{{movie.title}}</span><br/>
<span class="item-line2">{{movie.genre}}</span>
</div>
</igx-bottom-nav-content>
</igx-bottom-nav-item>
<igx-bottom-nav-item>
<igx-bottom-nav-header>
<igx-icon igxBottomNavHeaderIcon>library_books</igx-icon>
<span igxBottomNavHeaderLabel>Books</span>
</igx-bottom-nav-header>
<igx-bottom-nav-content>
<div class="item" *ngFor="let book of booksList">
<span class="item-line1">{{book.title}}</span><br/>
<span class="item-line2">{{book.author}}</span>
</div>
</igx-bottom-nav-content>
</igx-bottom-nav-item>
</igx-bottom-nav>
Probablemente hayas notado que además de colocar el icono y el intervalo con la etiqueta entre las etiquetas de encabezado del elemento, también les adjuntamos las directivas igxBottomNavHeaderIcon e igxBottomNavHeaderLabel. Estas directivas denotan los elementos respectivos y les aplican los estilos adecuados.
Finalmente, agregue las clases CSS utilizadas por los elementos DIV y SPAN de la plantilla de contenido al archivo CSS del componente:
.item {
margin-bottom: 5px;
}
.item-line1 {
font-size: 14px;
color: gray;
}
.item-line2 {
font-size: 12px;
color: darkgray;
}
igx-bottom-nav-content {
padding: 10px;
}
Después de estas modificaciones, nuestra navegación inferior debería verse similar a esta:
Si tener etiquetas e íconos en los encabezados no es suficiente, simplemente puede agregar su contenido personalizado entre las etiquetas del encabezado. Aquí hay un ejemplo:
<igx-bottom-nav>
<igx-bottom-nav-item>
<igx-bottom-nav-header>
<igx-icon igxBottomNavHeaderIcon>video_library</igx-icon>
<span igxBottomNavHeaderLabel>Movies</span>
<div>
<!-- your custom tab header content goes here -->
</div>
</igx-bottom-nav-header>
<igx-bottom-nav-content>
<h1>Tab content</h1>
</igx-bottom-nav-content>
</igx-bottom-nav-item>
</igx-bottom-nav>
Integration With Router Outlet Container
A pesar de que el uso principal del componente de navegación inferior es definir elementos de pestaña con contenido, puede haber casos en los que necesite definir elementos de pestaña solo con encabezados. Probablemente, el escenario principal para dicho uso sea la navegación entre vistas utilizando Angular Router. El siguiente ejemplo demostrará cómo configurar el componente de navegación inferior para cambiar entre tres componentes en una sola salida de enrutador.
Para comenzar, necesitamos un componente principal que aloje el componente de navegación inferior y tres componentes de vista con algún contenido para fines de demostración. Para simplificar los fragmentos de código, los componentes de la vista tendrán una plantilla muy corta, pero si es necesario, puedes hacerlos más distinguibles. Importe también estos componentes de vista en su archivo app.module.ts.
// bottomnav-routing.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-bottomnav-routing',
styleUrls: ['bottomnav-routing.component.scss'],
templateUrl: 'bottomnav-routing.component.html'
})
export class BottomNavRoutingComponent { }
@Component({
template: '<p>Item 1 Content</p>'
})
export class BottomNavRoutingView1Component { }
@Component({
template: '<p>Item 2 Content</p>'
})
export class BottomNavRoutingView2Component { }
@Component({
template: '<p>Item 3 Content</p>'
})
export class BottomNavRoutingView3Component { }
El siguiente paso es crear las asignaciones de navegación apropiadas en el archivo app-routing.module.ts:
import { RouterModule, Routes } from '@angular/router';
import {
TabbarRoutingComponent,
TabbarRoutingView1Component,
TabbarRoutingView2Component,
TabbarRoutingView3Component,
} from './tabbar-routing.component';
const routes: Routes = [
{
path: '',
pathMatch: 'full',
redirectTo: '/tabbar-routing'
},
{
path: 'tabbar-routing',
component: TabbarRoutingComponent,
children: [
{ path: 'tabbar-view1', component: TabbarView1Component },
{ path: 'tabbar-view2', component: TabbarView2Component },
{ path: 'tabbar-view3', component: TabbarView3Component }
]
}
];
@NgModule({
exports: [ RouterModule ],
imports: [ RouterModule.forChild(routes) ]
})
export class TabbarRoutingModule { }
Ahora que tenemos todas las rutas de navegación configuradas, debemos declarar el componente BottomNavigation y configurarlo para el enrutamiento. Además, asegúrese de agregar una salida de enrutador para representar la salida de los componentes de la vista.
<!-- bottomnav-routing.component.html -->
<router-outlet></router-outlet>
<igx-bottom-nav #tabs1>
<igx-bottom-nav-item
routerLinkActive
#rla1="routerLinkActive"
[selected]="rla1.isActive"
>
<igx-bottom-nav-header routerLink="tabbar-view1">
<igx-icon igxBottomNavHeaderIcon>phone</igx-icon>
</igx-bottom-nav-header>
</igx-bottom-nav-item>
<igx-bottom-nav-item
routerLinkActive
#rla2="routerLinkActive"
[selected]="rla2.isActive"
>
<igx-bottom-nav-header routerLink="tabbar-view2">
<igx-icon igxBottomNavHeaderIcon>supervisor_account</igx-icon>
</igx-bottom-nav-header>
</igx-bottom-nav-item>
<igx-bottom-nav-item
routerLinkActive
#rla3="routerLinkActive"
[selected]="rla3.isActive"
>
<igx-bottom-nav-header routerLink="tabbar-view3">
<igx-icon igxBottomNavHeaderIcon>format_list_bulleted</igx-icon>
</igx-bottom-nav-header>
</igx-bottom-nav-item>
</igx-bottom-nav>
El código anterior crea un componente BottomNavigation con tres elementos de pestaña. A todos los elementos de la pestaña se les aplica la directiva RouterLinkActive, que rastrea si la ruta vinculada está actualmente activa. Tenga en cuenta que la directiva RouterLink se aplica en el elemento del encabezado, no en el elemento de la pestaña. Si alguno de estos enlaces se activa, el elemento de la pestaña correspondiente tendrá su propiedad selected establecida debido al enlace a la propiedad isActive de la directiva RouterLinkActive. De esta manera, el elemento de la pestaña seleccionado siempre permanecerá sincronizado con la dirección del navegador actual.
El enfoque descrito anteriormente se utiliza en el siguiente ejemplo para demostrar el enrutamiento mediante el componente BottomNavigation:
Styles
Para comenzar a diseñar las pestañas, 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 bottom-nav-theme y acepta varios parámetros que nos permiten diseñar los grupos de pestañas.
$dark-bottom-nav: bottom-nav-theme(
$background: #292826,
$active-item-color: #F4D45C
);
Si echamos un vistazo al bottom-nav-theme, notaremos que hay aún más parámetros disponibles para diseñar nuestro componente de navegación inferior.
Note
Para aplicar estilo a cualquier componente adicional que se utilice como parte del contenido de un elemento, se debe crear un tema adicional que sea específico para el componente respectivo.
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 bottom-nav($dark-bottom-nav);
Note
Si el componente utiliza una ViewEncapsulation Emulated, es necesario penetrate esta encapsulación usando::ng-deep
:host {
::ng-deep {
@include bottom-nav($dark-bottom-nav);
}
}
Si $legacy-support está configurado en false (predeterminado), incluya las variables CSS del componente así:
@include css-vars($dark-bottom-nav);
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($dark-bottom-nav);
}
Defining a color palette
En lugar de codificar los valores de color como acabamos de hacer, podemos lograr una mayor flexibilidad en términos de colores utilizando las funciones igx-palette e igx-color.
igx-palette genera una paleta de colores basada en los colores primarios y secundarios que se pasan:
$yellow-color: #F4D45C;
$black-color: #292826;
$dark-palette: palette($primary: $black-color, $secondary: $yellow-color);
Y luego con igx-color podemos recuperar fácilmente el color de la paleta.
$dark-bottom-nav: bottom-nav-theme(
$background: color($dark-palette, "primary", 400),
$active-item-color: color($dark-palette, "secondary", 400)
);
Using Schemas
Yendo más allá con el motor de temas, puede crear una estructura sólida y flexible que se beneficie de los esquemas. Un esquema es una receta de un tema.
Amplíe uno de los dos esquemas predefinidos, que se proporcionan para cada componente, en este caso, el esquema dark-bottom-nav:
// Extending the dark bottom nav schema
$dark-bottom-nav-schema: extend($_dark-bottom-nav,
(
background: (
color: ("primary", 400)
),
active-item-color: (
color: ("secondary", 400)
)
)
);
Para aplicar nuestros esquemas personalizados, tenemos que extender uno de los globales (light u dark), que básicamente señala los componentes con un esquema personalizado, y luego agregarlo a los respectivos temas de los componentes:
// Extending the global dark-schema
$custom-dark-schema: extend($dark-schema,(
igx-bottom-nav: $dark-bottom-nav-schema
));
// Defining bottom-nav-theme with the global dark schema
$dark-bottom-nav: bottom-nav-theme(
$palette: $dark-palette,
$schema: $custom-dark-schema
);
No olvide incluir los temas de la misma manera que se demostró anteriormente.
Demo
API References
Theming Dependencies
Additional Resources
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.
GitHub