Descripción general del componente de pestañas Angular

Ignite UI for Angular Tabs es un componente de interfaz de usuario con todas las funciones que tiene el objetivo principal de organizar y agrupar contenido relacionado en una sola vista con pestañas, ahorrando así espacio y haciendo que el contenido sea más comprensible. Incluye diferentes funciones como animaciones, plantillas, opciones de personalización y otras.

Las pestañas en Angular son extremadamente útiles cuando estás creando una página web con mucho contenido que debe encajarse en categorías y mostrarse de una manera concisa y que ahorre espacio.

El componente igx-tabs en Ignite UI for Angular se utiliza para organizar o cambiar entre conjuntos de datos similares. Funciona como un contenedor para igx-tab-item que representa respectivamente el contenedor de los datos y el encabezado de la pestaña. El componente Angular Tabs coloca pestañas en la parte superior y permite desplazarse cuando hay varios elementos de pestaña en la pantalla.

Angular Tabs Example

Este es un ejemplo básico de pestañas anidadas Angular donde tenemos una pestaña dentro de otra donde solo se puede ver una vista a la vez. Al usar pestañas anidadas en Angular, podemos mostrar información de una manera mejor y estructurada.

Getting Started with Ignite UI for Angular Tabs

Para comenzar con el componente Ignite UI for Angular Tabs, 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 IgxTabsModule en su archivo app.module.ts.

// app.module.ts

...
import { IgxTabsModule } from 'igniteui-angular';
// import { IgxTabsModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxTabsModule],
    ...
})
export class AppModule {}

Alternativamente, a partir de 16.0.0, puede importar IgxTabsComponent como una dependencia independiente o usar el token IGX_TABS_DIRECTIVES para importar el componente y todos sus componentes y directivas de soporte.

// home.component.ts

import { IGX_TABS_DIRECTIVES } from 'igniteui-angular';
// import { IGX_TABS_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-tabs>
      <igx-tab-item>
        <igx-tab-header>
          <span igxTabHeaderLabel>Tab 1</span>
        </igx-tab-header>
        <igx-tab-content>
          This is Tab 1 content.
        </igx-tab-content>
      </igx-tab-item>
      <igx-tab-item>
        <igx-tab-header>
          <span igxTabHeaderLabel>Tab 2</span>
        </igx-tab-header>
        <igx-tab-content>
          This is Tab 2 content.
        </igx-tab-content>
      </igx-tab-item>
    </igx-tabs>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_TABS_DIRECTIVES]
    /* or imports: [IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabContentComponent, IgxTabHeaderLabelDirective] */
})
export class HomeComponent {}

Ahora que ha importado el módulo o las directivas Ignite UI for Angular Tabs, puede comenzar a usar el componente igx-tabs.

Using the Angular Tabs

Configuramos el encabezado Angular Tabs proporcionando contenido a igx-tab-header. Para configurar el nombre de la pestaña, simplemente agregamos un intervalo con la directiva igxTabHeaderLabel. Cualquier contenido que aparezca como contenido de un elemento de pestaña debe agregarse entre las etiquetas igx-tab-content.

<igx-tabs>
  <igx-tab-item>
    <igx-tab-header>
      <span igxTabHeaderLabel>Tab 1</span>
    </igx-tab-header>
    <igx-tab-content>
      This is Tab 1 content.
    </igx-tab-content>
  </igx-tab-item>
  <igx-tab-item>
    <igx-tab-header>
      <span igxTabHeaderLabel>Tab 2</span>
    </igx-tab-header>
    <igx-tab-content>
      This is Tab 2 content.
    </igx-tab-content>
  </igx-tab-item>
  <igx-tab-item>
    <igx-tab-header>
      <span igxTabHeaderLabel>Tab 3</span>
    </igx-tab-header>
    <igx-tab-content>
      This is Tab 3 content.
    </igx-tab-content>
  </igx-tab-item>
  <igx-tab-item>
    <igx-tab-header>
      <span igxTabHeaderLabel>Tab 4</span>
    </igx-tab-header>
    <igx-tab-content>
      This is Tab 4 content.
    </igx-tab-content>
  </igx-tab-item>
  <igx-tab-item>
    <igx-tab-header>
      <span igxTabHeaderLabel>Tab 5</span>
    </igx-tab-header>
    <igx-tab-content>
      This is Tab 5 content.
    </igx-tab-content>
  </igx-tab-item>
</igx-tabs>

Si la muestra está configurada correctamente, el resultado final debería verse así:

Angular Tabs Alignment

La propiedad de entrada IgxTabs tabAlignment controla cómo se colocan y organizan las pestañas. Acepta cuatro valores diferentes: inicio, centro, fin y justificación.

• Inicio (predeterminado): el ancho del encabezado de la pestaña depende del contenido (etiqueta, icono, ambos) y todas las pestañas tienen el mismo relleno. La primera pestaña está alineada con el lado izquierdo del contenedor de pestañas.
• Centro: el ancho del encabezado de la pestaña depende del contenido y ocupa el centro del contenedor de pestañas. Si el espacio no es suficiente para todos los elementos, se muestran botones de desplazamiento.
• Fin: el ancho del encabezado de la pestaña depende del contenido y todas las pestañas tienen el mismo relleno. La última pestaña está alineada con el lado derecho del contenedor de pestañas.
• Justificar: todos los encabezados de las pestañas tienen el mismo ancho y se ajustan completamente al contenedor de pestañas. Si el espacio no es suficiente para todos los elementos, se muestran botones de desplazamiento.

El siguiente ejemplo muestra cómo se alinean las pestañas al cambiar entre los valores de la propiedad tabAlignment.

Customizing Angular Tabs

Modifiquemos las pestañas y hagámoslas más atractivas incluyendo íconos usando la directiva igxTabHeaderIcon. El componente igx-tabs es compatible con los iconos de Material Design, por lo que será muy fácil adoptarlos en su 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.

Primero, agregue los íconos de materiales en su archivo 'styles.scss' en la carpeta principal de la aplicación. A continuación, agregue igx-icon con el conjunto de directivas igxTabHeaderIcon, como elemento secundario de igx-tab-header.

// styles.scss

...
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
...

<igx-tabs>
  <igx-tab-item>
    <igx-tab-header>
        <igx-icon igxTabHeaderIcon>library_music</igx-icon>
        <span igxTabHeaderLabel>Albums</span>
    </igx-tab-header>
    <igx-tab-content>
        Albums
    </igx-tab-content>
  </igx-tab-item>
  <igx-tab-item>
    <igx-tab-header>
        <igx-icon igxTabHeaderIcon>favorite</igx-icon>
        <span igxTabHeaderLabel>Favorite</span>
    </igx-tab-header>
    <igx-tab-content>
        Favorite
    </igx-tab-content>
  </igx-tab-item>
  <igx-tab-item>
    <igx-tab-header>
        <igx-icon igxTabHeaderIcon>info</igx-icon>
        <span igxTabHeaderLabel>Details</span>
    </igx-tab-header>
    <igx-tab-content>
        Details
    </igx-tab-content>
  </igx-tab-item>
</igx-tabs>

Si el ejemplo está configurado correctamente, las pestañas deberían verse como en el siguiente ejemplo:

Si configurar las etiquetas y los íconos no es suficiente, también puede proporcionar su propio contenido personalizado directamente entre las etiquetas igx-tab-header.

<igx-tabs>
  <igx-tab-item>
    <igx-tab-header>
      <!-- your custom tab content goes here -->
      <div>
        <img src="https://static.infragistics.com/marketing/Website/products/ignite-ui-landing/ignite-ui-logo.svg"
             width="80px" height="40px">
      </div>
    </igx-tab-header>
    <igx-tab-content>
      <h1>IgniteUI Rocks!</h1>
    </igx-tab-content>
  </igx-tab-item>
</igx-tabs>

También puede agregar su propio prefijo y sufijo de encabezado de pestaña personalizado simplemente usando las directivas igxPrefix e igxSuffix. El siguiente ejemplo muestra cómo agregar una pestaña con contenido de encabezado personalizado y prefijo/sufijo.

Integration With Router Outlet Container

Aunque el componente igx-tabs está diseñado para usarse como una lista de pestañas con contenido especificado para cada elemento de pestaña, puede haber casos en los que necesite definir elementos de pestaña donde el contenido esté separado del contenido de la pestaña.

Al definir elementos de pestaña, tiene la posibilidad de aplicarles directivas. Por ejemplo, puede utilizar esta funcionalidad para lograr la navegación entre vistas utilizando Angular Router. El siguiente ejemplo demostrará cómo configurar el componente igx-tabs para cambiar entre tres componentes en una sola salida de enrutador.

Para comenzar, necesitamos un componente para contener nuestro componente igx-tabs y tres componentes de vista con algún contenido para fines de demostración. Para simplificar, los componentes de la vista tienen plantillas muy cortas.

import { Component } from '@angular/core';

@Component({
    selector: 'app-tabs-routing',
    styleUrls: ['tabs-routing.component.scss'],
    templateUrl: 'tabs-routing.component.html'
})
export class TabsRoutingComponent { }

@Component({
    template: '<p>Tab 1 Content</p>'
})
export class TabsRoutingView1Component { }

@Component({
    template: '<p>Tab 2 Content</p>'
})
export class TabsRoutingView2Component { }

@Component({
    template: '<p>Tab 3 Content</p>'
})
export class TabsRoutingView3Component { }

A continuación, creamos las asignaciones de navegación apropiadas en el archivo app-routing.module.ts:

import { RouterModule, Routes } from '@angular/router';

import {
    TabsRoutingComponent,
    TabsRoutingView1Component,
    TabsRoutingView2Component,
    TabsRoutingView3Component
} from './tabs-routing.component';

...

const routes: Routes = [
    {
        path: '',
        pathMatch: 'full',
        redirectTo: '/tabs-routing'
    },
    {
        path: 'tabs-routing',
        component: TabsRoutingComponent,
        children: [
            { path: 'view1', component: TabsRoutingView1Component },
            { path: 'view2', component: TabsRoutingView2Component },
            { path: 'view3', component: TabsRoutingView3Component },
        ]
    }
];

@NgModule({
    exports: [RouterModule],
    imports: [RouterModule.forRoot(appRoutes)]
})
export class AppRoutingModule { }

Ahora que tenemos todas las rutas de navegación configuradas, debemos declarar el componente igx-tabs y configurarlo para el enrutamiento. Asegúrese de agregar una salida de enrutador para renderizar los componentes de la vista.

<!-- tabs-routing.component.html -->

<igx-tabs #tabs1>
  <igx-tab-item
      routerLinkActive
      #rla1="routerLinkActive"
      [selected]="rla1.isActive"
  >
      <igx-tab-header routerLink="view1">
          <span igxTabHeaderLabel>Tab 1</span>
      </igx-tab-header>
  </igx-tab-item>
  <igx-tab-item
      routerLinkActive
      #rla2="routerLinkActive"
      [selected]="rla2.isActive"
  >
      <igx-tab-header routerLink="view2">
          <span igxTabHeaderLabel>Tab 2</span>
      </igx-tab-header>
  </igx-tab-item>
  <igx-tab-item
      routerLinkActive
      #rla3="routerLinkActive"
      [selected]="rla3.isActive"
  >
      <igx-tab-header routerLink="view3">
          <span igxTabHeaderLabel>Tab 3</span>
      </igx-tab-header>
  </igx-tab-item>
</igx-tabs>

<router-outlet></router-outlet>

El código anterior crea un componente igx-tabs con tres elementos de pestaña. El encabezado de cada elemento de pestaña tiene aplicada la directiva RouterLink, que se utiliza para especificar el enlace de enrutamiento utilizado para la navegación. Si alguno de los 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 se sincronizará con la ruta URL actual.

Note

Tenga en cuenta que la directiva routerLink está configurada en igx-tab-header, no directamente en igx-tab-item.

Styles

Para comenzar a diseñar las pestañas, necesitamos importar el módulo de temas, 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 tabs-theme y acepta varias propiedades que nos permiten diseñar los grupos de pestañas.

$dark-tabs: tabs-theme(
    $item-text-color: #F4D45C,
    $item-background: #292826,
    $item-hover-background: #F4D45C,
    $item-hover-color: #292826,
    $item-active-color: #F4D45C,
    $item-active-icon-color: #F4D45C,
    $indicator-color: #F4D45C,
    $tab-ripple-color: #F4D45C
);

Si echamos un vistazo al tabs-theme, notaremos que hay aún más propiedades disponibles para diseñar nuestras pestañas.

Note

Para aplicar estilo a cualquier componente utilizado como parte del contenido de una pestaña, se deben crear temas adicionales específicos para el componente respectivo.

El último paso es incluir el tema del componente en nuestra aplicación.

@include css-vars($dark-tabs);

Si su objetivo es navegadores que no admiten variables CSS, como IE 11, puede usar el componente de tema mixin para sobrescribir su tema predeterminado:

:host {
  ::ng-deep {
    @include tabs($dark-tabs);
  }
}

Palettes & Colors

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,
  $grays: #fff
);

Podemos recuperar fácilmente cualquier color de la paleta usando igx-color.

$dark-tabs: tabs-theme(
    $palette: $dark-palette,
    $item-text-color: color($dark-palette, "secondary", 400),
    $item-background: color($dark-palette, "primary", 400),
    $item-hover-background: color($dark-palette, "secondary", 400),
    $item-hover-color: color($dark-palette, "primary", 400),
    $item-active-color: color($dark-palette, "secondary", 400),
    $item-active-icon-color: color($dark-palette, "secondary", 400),
    $indicator-color: color($dark-palette, "secondary", 400),
    $tab-ripple-color: color($dark-palette, "secondary", 400)
);

API References

• Componente IgxIcon
• Componente IgxNavbar
• Componente IgxTabs
• Estilos de componentes IgxTabs
• Componente IgxTabItem
• Componente IgxTabHeader
• Componente de contenido IgxTab

Theming Dependencies

• Tema IgxIcon
• Tema IgxRipple
• Tema IgxButton

Additional Resources

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.

• Ignite UI for Angular foros angulares
• Ignite UI for Angular GitHub