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-barSelector está obsoleto. Podrías usarigx-bottom-nav en su lugar.IgxTabBarComponent la clase pasa a llamarse aIgxBottomNavComponent.IgxTabBarModule se renombra aIgxBottomNavModule.

    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.

    El siguiente paso es importarlosIgxBottomNavModule en tu archivo app.module.ts.

    // 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 {}

    Alternativamente,16.0.0 puedes importarlosIgxBottomNavComponent como una dependencia independiente, o usar elIGX_BOTTOM_NAV_DIRECTIVES token para importar el componente y todos sus componentes y directivas de soporte.

    // 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 {}

    Ahora que tienes importado el módulo o directivas Ignite UI for Angular Navegación Inferior, puedes empezar a usar eligx-bottom-nav componente.

    Using the Angular Bottom Navigation

    La plantilla de nuestro componente incluye la Navegación Inferior y tres elementos. Cada elemento envuelve unigx-bottom-nav-header y unigx-bottom-nav-content componente que representan respectivamente el encabezado y el contenedor de los datos. Los encabezados suelen consistir en un icono y una etiqueta de texto opcional. El control de navegación inferior es compatible con los Iconos de Diseño de Materiales, así que para adoptarlos en tu aplicación simplemente añade la importación Material+Iconos en tu archivo 'styles.css' en la carpeta principal de la aplicación.

    Note

    Si no los has usadoigx-icon en tu solicitud hasta ahora, por favor asegúrate de importarlosIgxIconModule en la 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 span con la etiqueta entre las etiquetas de cabecera del artículo, también les añadimos lasigxBottomNavHeaderIcon directivas yigxBottomNavHeaderLabel de y a ellas. Estas directrices 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 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.

    Para empezar necesitamos un componente principal que aloje el componente de navegación inferior y tres componentes de vista con algo de contenido para fines demostrativos. Para simplificar los fragmentos de código, los componentes de vista tendrán una plantilla muy corta, pero siéntete libre de hacerlos más distinguibles si lo necesitas. También importa estos componentes de vista en tuapp.module.ts archivo.

    // 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 los mapas de navegación apropiados en elapp-routing.module.ts archivo:

    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. Todos los elementos de la pestaña tienen aplicada laRouterLinkActive directiva que rastrea si la ruta enlazada está activa actualmente. Por favor, ten en cuenta que laRouterLink directiva se aplica al elemento de cabecera en sí, no al elemento de la tabulación. Si alguno de estos enlaces se activa, el elemento de tabulación correspondiente tendráselected su propiedad establecida debido a la vinculación a laRouterLinkActive propiedad deisActive la directiva. De este modo, el elemento de la pestaña seleccionado siempre estará 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

    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.

    Para empezar a estilizar las pestañas, 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 ybottom-nav-theme acepta varios parámetros que nos permiten estilizar los grupos de pestañas.

    $dark-bottom-nav: bottom-nav-theme(
  $background: #292826,
  $icon-selected-color: #f4d45c
);
    Note

    En lugar de codificar los valores de color como acabamos de hacer, podemos lograr mayor flexibilidad en cuanto a colores usando laspalette funciones ycolor. Por favor, consulta elPalettes tema para obtener una guía detallada sobre cómo utilizarlos.

    Si echamos un vistazobottom-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.

    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';

    El archivo de utilidad incluye variantes tantolight comodark de tema.

    • Usalight-* clases para el tema ligero.
    • Usadark-* clases para el tema oscuro.
    • Añadir el nombre del componente después del prefijo, por ejemplo, ,light-bottom-nav,dark-bottom-nav.

    Una vez aplicadas, estas clases permiten cálculos dinámicos de temas. Desde ahí, puedes anular las variables CSS generadas usandoarbitrary properties. Después de los dos puntos, proporciona cualquier formato de color CSS válido (HEX, variable CSS, 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

    El signo de exclamación(!) es necesario para asegurar que la clase de utilidad tenga prioridad. Tailwind aplica estilos en capas y, sin marcar estos estilos como importantes, serán anulados por el tema predeterminado del componente.

    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.