Angular Descripción general del componente de navegación inferior
El componente de navegación inferior Ignite UI for Angular permite al usuario navegar entre una serie de paneles de contenido que se muestran en una sola vista. La navegación a través de los paneles se realiza con los botones de pestaña ubicados en la parte inferior de la aplicación.
Note
igx-tab-bar selector is deprecated. You could use igx-bottom-nav instead. IgxTabBarComponent class is renamed to IgxBottomNavComponent. IgxTabBarModule is renamed to IgxBottomNavModule.
Angular Bottom Navigation Example
Getting Started with Ignite UI for Angular Bottom Navigation
Para empezar a utilizar el componente de navegación inferior Ignite UI for Angular, 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.
The next step is to import the IgxBottomNavModule in your app.module.ts file.
// app.module.ts
...
import { IgxBottomNavModule } from 'igniteui-angular/bottom-nav';
// import { IgxBottomNavModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxBottomNavModule],
...
})
export class AppModule {}
Alternatively, as of 16.0.0 you can import the IgxBottomNavComponent as a standalone dependency, or use the IGX_BOTTOM_NAV_DIRECTIVES token to import the component and all of its supporting components and directives.
// home.component.ts
import { IGX_BOTTOM_NAV_DIRECTIVES } from 'igniteui-angular/bottom-nav';
import { IgxIconComponent } from 'igniteui-angular/icon';
// 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 {}
Now that you have the Ignite UI for Angular Bottom Navigation module or directives imported, you can start using the igx-bottom-nav component.
Using the Angular Bottom Navigation
Our component's template includes the Bottom Navigation and three items. Each item wraps an igx-bottom-nav-header and an igx-bottom-nav-content component which represent respectively the header and the container of the data. Headers usually consist of an icon and an optional text label. The Bottom Navigation control is compatible with the Material Design Icons so to adopt them in your application simply add the Material+Icons import in your 'styles.css' file in the main application folder.
Note
If you haven't used the igx-icon in your application so far, please make sure to import the IgxIconModule in the app.module.ts before proceeding.
// 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>
You probably noticed that in addition to placing the icon and the span with the label between the item's header tags, we also attach the igxBottomNavHeaderIcon and the igxBottomNavHeaderLabel directives to them. These directives denote the respective elements and apply the proper styles to them.
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 es la navegación entre vistas mediante el enrutador Angular. En el siguiente ejemplo se demostrará cómo configurar el componente de navegación inferior para cambiar entre tres componentes en una sola salida de enrutador.
To start we need a main component hosting the Bottom Navigation component and three view components with some content for demonstration purposes. For code snippets' simplicity, the view components will have a very short template but feel free to make them more distinguishable if you need. Also import these view components in your app.module.ts file.
// 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 { }
The next step is to create the appropriate navigation mappings in the app-routing.module.ts file:
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>
The above code creates a BottomNavigation component with three tab items. All tab items are having the RouterLinkActive directive applied which tracks whether the linked route is currently active. Please, note, that the RouterLink directive is applied on the header element itself, not on the tab item. If any of these links becomes active, the corresponding tab item will have its selected property set because of the binding to the RouterLinkActive directive's isActive property. This way the selected tab item will always stay synchronized with the current browser's address.
El enfoque descrito anteriormente se utiliza en el siguiente ejemplo para demostrar el enrutamiento mediante el componente BottomNavigation:
Styles
Bottom Nav Theme Property Map
Al modificar una propiedad principal, todas las propiedades dependientes relacionadas se actualizan automáticamente para reflejar el cambio:
| Propiedad principal | Propiedad dependiente | Descripción |
|---|---|---|
| $background | $label-color | El color de la etiqueta usado en estado de reposo. |
| $label-color | $icon color | El color de iconos usado en estado de reposo. |
| $label-desactivado-color | El color desactivado de la etiqueta. | |
| $icon color | $label-color | El color de la etiqueta usado en estado de reposo. |
| $label-desactivado-color | $icon-desactivado-color | El color desactivado del icono. |
| $icon-desactivado-color | $label-desactivado-color | El color desactivado de la etiqueta. |
| $label-color-seleccionado | $icon-color-seleccionado | El color de icono usado en el estado seleccionado. |
| $icon-color-seleccionado | $label-color-seleccionado | El color de la etiqueta utilizado en el estado seleccionado. |
To get started with styling the tabs, we need to import the index file, where all the theme functions and component mixins live:
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
Following the simplest approach, we create a new theme that extends the bottom-nav-theme and accepts various parameters that allow us to style the tab groups.
$dark-bottom-nav: bottom-nav-theme(
$background: #292826,
$icon-selected-color: #f4d45c
);
Note
Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the palette and color functions. Please refer to Palettes topic for detailed guidance on how to use them.
If we take a look at the bottom-nav-theme, we will notice that there are even more parameters available to us in order to style our bottom navigation component!
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.
El último paso es incluir el tema del componente en nuestra aplicación.
@include css-vars($dark-bottom-nav);
Demo
Styling with Tailwind
Puedes diseñar la navegación inferior usando nuestras clases utilitarias personalizadas de Tailwind. Asegúrate de configurar primero a Tailwind.
Junto con la importación de Tailwind en tu hoja de estilos global, puedes aplicar las utilidades de tema deseadas de la siguiente manera:
@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';
The utility file includes both light and dark theme variants.
- Use
light-*classes for the light theme. - Use
dark-*classes for the dark theme. - Append the component name after the prefix, e.g.,
light-bottom-nav,dark-bottom-nav.
Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using arbitrary properties. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.).
Puedes encontrar la lista completa de propiedades en el Tema IgxBottomNav. La sintaxis es la siguiente:
<igx-bottom-nav
class="!light-bottom-nav
![--background:#011627]
![--icon-selected-color:#FF8040]
![--label-selected-color:#FF8040]">
...
</igx-bottom-nav>
Note
The exclamation mark(!) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme.
Al final, tu navegación inferior debería verse así:
API References
Theming Dependencies
Additional Resources
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.
GitHub