Descripción general del componente Angular Tabs

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

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

The igx-tabs component in Ignite UI for Angular is used to organize or switch between similar data sets. It functions as a wrapper for igx-tab-item which respectively represent the container for the data and the tab header. The Angular Tabs Component places tabs at the top and allows scrolling when there are multiple tab items on the screen.

Angular Tabs Example

Este es un ejemplo básico de Angular pestañas anidadas donde tenemos una pestaña dentro de otra donde solo se puede ver una vista a la vez. Usando pestañas anidadas en Angular, podemos mostrar la información de una manera mejor y más 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 al Ignite UI for Angular, lea el tema de introducción.

The next step is to import the IgxTabsModule in your app.module.ts file.

// app.module.ts

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

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

Alternatively, as of 16.0.0 you can import the IgxTabsComponent as a standalone dependency, or use the IGX_TABS_DIRECTIVES token to import the component and all of its supporting components and directives.

// home.component.ts

import { IGX_TABS_DIRECTIVES } from 'igniteui-angular/tabs';
// 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 {}

Now that you have the Ignite UI for Angular Tabs module or directives imported, you can start using the igx-tabs component.

Using the Angular Tabs

We set the Angular Tabs header by providing content to igx-tab-header. To set the tab's name we simply add a span with igxTabHeaderLabel directive. Any content that will appear as a tab item's content should be added between igx-tab-content tags.

<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

IgxTabs tabAlignment input property controls how tabs are positioned and arranged. It accepts four different values - start, center, end and justify.

• 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.

Sample below demonstrates how tabs get aligned when switching between tabAlignment property values.

Customizing Angular Tabs

Let's modify the tabs and make them more appealing by including icons using the igxTabHeaderIcon directive. The igx-tabs component is compatible with the Material Design Icons so it will be very easy to adopt them in your application.

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.

First, add the Material Icons in your 'styles.scss' file in the main application folder. Next, add igx-icon with igxTabHeaderIcon directive set, as a child of 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:

If setting the labels and icons is not enough, you can also provide your own custom content directly between igx-tab-header tags.

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

You can also add you own custom tab header's prefix and suffix simply by using igxPrefix and igxSuffix directives. The sample below demonstrates how to add a tab with custom header content and prefix/suffix.

Integration With Router Outlet Container

Although the igx-tabs component is meant to be used as a list of tabs with content specified for each tab item, there might be cases in which you need to define tab items where the content is separate from the tab content.

When defining tab items you have the ability to apply directives to them. For example, you may use this functionality to achieve navigation between views using the Angular Router. The following example will demonstrate how to configure the igx-tabs component to switch between three components in a single router-outlet.

To start we need a component to hold our igx-tabs component and three view components with some content for demonstration purposes. For simplicity, the view components have very short templates.

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

Next, we create the appropriate navigation mappings in the app-routing.module.ts file:

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

Now that we have all navigation routes set up, we need to declare the igx-tabs component and configure it for routing. Make sure to add a router-outlet for rendering the view components.

<!-- 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>

The above code creates an igx-tabs component with three tab items. Each tab item's header has the RouterLink directive applied, which is used to specify the routing link used for the navigation. If any of the 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 be synchronized with the current url path.

Note

Please note that the routerLink directive is set to the igx-tab-header, not directly to the igx-tab-item.

Styles

Tabs Theme Property Map

Al modificar una propiedad principal, todas las propiedades dependientes relacionadas se actualizan automáticamente para reflejar el cambio:

Material Fluido Bootstrap Añil

Propiedad principal	Propiedad dependiente	Descripción
$item antecedentes	$item-activo-antecedentes	El color usado para el fondo de la pestaña activa/enfocada.
	$item-text-color	El color usado para el texto de la tabulación.
	$item-icono-color	El color que se usa para el icono de pestañas.
	$item-hover-background	El fondo usado para las pestañas al pasar el cursor.
	$indicator color	El color utilizado para el indicador de pestaña activa.
	$button-antecedentes	El color que se usa para el fondo de los botones.
	$button-hover-fondo	El color que se usa para el fondo del botón al pasar el cursor.
$item-activo-antecedentes	$item-icono-activo-color	El color usado para el icono de la pestaña activa.
	$item-activo-color	El color usado para el texto activo de las pestañas.
	$tab-color ondulado	El color que se usa para el fondo de los botones.
$item-text-color	$item-hover-color	El color de texto usado para las pestañas al pasar el cursor si no se proporciona '$item-hover-background'
	$item-icono-color	El color que se utiliza para el icono de la pestaña si no se proporciona '$item-fondo'
	$item-activo-color	El color que se usa para el texto de las pestañas activas si no se proporciona '$item-activo-fondo'
	$indicator color	El color utilizado para el indicador de pestaña activa si no se proporciona '$item-fondo'
$item-icono-color	$item-color-icono-flotante	El color que se usa para el icono de la pestaña al pasar el cursor.
	$item-icono-activo-color	El color usado para el icono de la pestaña activa.
	$indicator color	El color utilizado para el indicador de pestaña activa.
$button fondo	$button-hover-fondo	El color que se usa para el fondo del botón al pasar el cursor.
	$button color	El color usado para el icono del botón/color del texto.
$button color	$button-desactivado-color	El color usado para el icono/texto del botón desactivado.
	$button-color ondulado	El color que se usa para el fondo del botón al pasar el cursor.
$button-hover-fondo	$button-hover-color	El color que se usa para el icono del botón/color del texto al pasar el cursor.

Propiedad principal	Propiedad dependiente	Descripción
$item antecedentes	$item-activo-antecedentes	El color usado para el fondo de la pestaña activa/enfocada.
	$item-text-color	El color usado para el texto de la tabulación.
	$item-icono-color	El color que se usa para el icono de pestañas.
	$item-hover-background	El fondo usado para las pestañas al pasar el cursor.
	$indicator color	El color utilizado para el indicador de pestaña activa.
	$button-antecedentes	El color que se usa para el fondo de los botones.
	$button-hover-fondo	El color que se usa para el fondo del botón al pasar el cursor.
$item-activo-antecedentes	$item-icono-activo-color	El color usado para el icono de la pestaña activa.
	$item-activo-color	El color usado para el texto activo de las pestañas.
	$tab-color ondulado	El color ondulado para la interacción con la pestaña.
$item-text-color	$item-hover-color	El color de texto usado para las pestañas al pasar el cursor si no se proporciona '$item-hover-background'
	$item-icono-color	El color que se utiliza para el icono de la pestaña si no se proporciona '$item-fondo'
	$item-activo-color	El color que se usa para el texto de las pestañas activas si no se proporciona '$item-activo-fondo'
	$indicator color	El color utilizado para el indicador de pestaña activa si no se proporciona '$item-fondo'
$item-icono-color	$item-color-icono-flotante	El color que se usa para el icono de la pestaña al pasar el cursor.
	$item-icono-activo-color	El color usado para el icono de la pestaña activa.
	$indicator color	El color utilizado para el indicador de pestaña activa.
$button fondo	$button-hover-fondo	El color que se usa para el fondo del botón al pasar el cursor.
	$button color	El color usado para el icono del botón/color del texto.
$button color	$button-desactivado-color	El color usado para el icono/texto del botón desactivado.
	$button-color ondulado	El color que se usa para el fondo del botón al pasar el cursor.
$button-hover-fondo	$button-hover-color	El color que se usa para el icono del botón/color del texto al pasar el cursor.

Propiedad principal	Propiedad dependiente	Descripción
$item antecedentes	$item-activo-antecedentes	El color usado para el fondo de la pestaña activa/enfocada.
	$item-text-color	El color usado para el texto de la tabulación.
	$item-icono-color	El color que se usa para el icono de pestañas.
	$item-hover-background	El fondo usado para las pestañas al pasar el cursor.
	$indicator color	El color utilizado para el indicador de pestaña activa.
	$button-antecedentes	El color que se usa para el fondo de los botones.
	$button-hover-fondo	El color que se usa para el fondo del botón al pasar el cursor.
	$border color	El color del borde de las pestañas.
$item-activo-antecedentes	$item-icono-activo-color	El color usado para el icono de la pestaña activa.
	$item-activo-color	El color usado para el texto activo de las pestañas.
	$tab-color ondulado	El color que se usa para el fondo de los botones.
$item-text-color	$item-hover-color	El color de texto usado para las pestañas al pasar el cursor si no se proporciona '$item-hover-background'
	$item-icono-color	El color que se utiliza para el icono de la pestaña si no se proporciona '$item-fondo'
	$button color	El color utilizado para el icono del botón/color del texto si no se proporciona '$button-fondo' (no material)
$item-icono-color	$item-color-icono-flotante	El color que se usa para el icono de la pestaña al pasar el cursor si no se proporciona '$item-hover-background'
	$item-text-color	El color utilizado para el texto de la tabulación si no se proporciona '$item-fondo'
$button fondo	$button-hover-fondo	El color que se usa para el fondo del botón al pasar el cursor.
	$button color	El color usado para el icono del botón/color del texto.
$button color	$button-hover-color	El color utilizado para el icono del botón/color del texto al pasar el cursor si no se proporciona '$button-fondo'
	$button-desactivado-color	El color usado para el icono/texto del botón desactivado.
	$button-color ondulado	El color que se usa para el fondo del botón al pasar el cursor.
$button-hover-fondo	$button-hover-color	El color que se usa para el icono del botón/color del texto al pasar el cursor.

Propiedad principal	Propiedad dependiente	Descripción
$item antecedentes	$item-activo-antecedentes	El color usado para el fondo de la pestaña activa/enfocada.
	$item-text-color	El color usado para el texto de la tabulación.
	$item-icono-color	El color que se usa para el icono de pestañas.
	$item-hover-background	El fondo usado para las pestañas al pasar el cursor.
	$indicator color	El color utilizado para el indicador de pestaña activa.
	$button-antecedentes	El color que se usa para el fondo de los botones.
	$button-hover-fondo	El color que se usa para el fondo del botón al pasar el cursor.
$item-activo-antecedentes	$item-icono-activo-color	El color usado para el icono de la pestaña activa.
	$item-activo-color	El color usado para el texto activo de las pestañas.
	$tab-color ondulado	El color que se usa para el fondo de los botones.
$item-text-color	$item-hover-color	El color de texto usado para las pestañas al pasar el cursor si no se proporciona '$item-hover-background'
	$item-icono-color	El color que se utiliza para el icono de la pestaña si no se proporciona '$item-fondo'
	$item-activo-color	El color que se usa para el texto de las pestañas activas si no se proporciona '$item-activo-fondo'
	$indicator color	El color utilizado para el indicador de pestaña activa si no se proporciona '$item-fondo'
$item-icono-color	$item-color-icono-flotante	El color que se usa para el icono de la pestaña al pasar el cursor.
	$item-icono-activo-color	El color usado para el icono de la pestaña activa.
	$indicator color	El color utilizado para el indicador de pestaña activa.
$button fondo	$button-hover-fondo	El color que se usa para el fondo del botón al pasar el cursor.
	$button color	El color usado para el icono del botón/color del texto.
$button color	$button-desactivado-color	El color usado para el icono/texto del botón desactivado.
	$button-color ondulado	El color que se usa para el fondo del botón al pasar el cursor.
$button-hover-fondo	$button-hover-color	El color que se usa para el icono del botón/color del texto al pasar el cursor.

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

Following the simplest approach, we create a new theme that extends the tabs-theme. By passing just a few base parameters—such as $item-background and $item-active-color—you can style your tabs with minimal effort. The theme will automatically generate all necessary background and foreground colors for the various interaction states.

Por supuesto, puede anular cualquier parámetro adicional para ajustar aún más la apariencia.

$dark-tabs: tabs-theme(
  $item-background: #292826,
  $item-active-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.

If we take a look at the tabs-theme, we will notice that there are even more properties available to us in order to style our tabs.

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

Demo

Styling with Tailwind

Puedes diseñar las pestañas usando nuestras clases utilitarias personalizadas de Tailwind. Asegúrate de configurar primero a Tailwind.

Junto con la importación de viento de cola en su hoja de estilo global, puede 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-tabs,dark-tabs.

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 IgxTabs. La sintaxis es la siguiente:

<igx-tabs
  class="!light-tabs
  ![--item-background:#011627]
  ![--item-active-icon-color:#FF8040]
  ![--item-active-color:#FF8040]">
  ...
</igx-tabs>

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, tus pestañas deberían verse así:

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
• Ignite UI for Angular GitHub