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.

Eligx-tabs componente en Ignite UI for Angular se utiliza para organizar o cambiar entre conjuntos de datos similares. Funciona como un wrapperigx-tab-item para el cual representan respectivamente el contenedor de los datos y la cabecera de tabulación. El componente Angular Tabs coloca las pestañas en la parte superior y permite desplazarse cuando hay varios elementos de pestañas en pantalla.

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.

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

// app.module.ts

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

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

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

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

Ahora que tienes importado el módulo o directivas Ignite UI for Angular Tabs, puedes empezar a usar eligx-tabs componente.

Using the Angular Tabs

Establecemos el encabezado de Angular Pestañas proporcionando contenido a.igx-tab-header Para establecer el nombre de la pestaña simplemente añadimos un span conigxTabHeaderLabel directiva. Cualquier contenido que aparezca como contenido de un elemento de pestaña debe añadirse entreigx-tab-content etiquetas.

<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 tabAlignmentLa propiedad de entrada controla cómo se posicionan 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 ejemplo siguiente muestra cómo se alinean las pestañas al cambiar entretabAlignment valores de propiedades.

Customizing Angular Tabs

Modifiquemos las pestañas y hagámoslas más atractivas incluyendo iconos usando laigxTabHeaderIcon directiva. Eligx-tabs componente es compatible con los Materials Design Icons, por lo que será muy fácil adoptarlos en tu 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.

Primero, añade los iconos de material en tu archivo 'styles.scss' en la carpeta principal de la aplicación. A continuación, añadeigx-icon conigxTabHeaderIcon conjunto de directivas, como hijo deigx-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 no basta con establecer etiquetas e iconos, también puedes proporcionar tu propio contenido personalizado directamente entreigx-tab-header etiquetas.

<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 puedes añadir el prefijo y sufijo personalizado de tu propio encabezado de pestañas simplemente usandoigxPrefix las directivas de yigxSuffix. El ejemplo siguiente muestra cómo añadir una pestaña con contenido de encabezado personalizado y prefijo/sufijo.

Integration With Router Outlet Container

Aunque eligx-tabs componente está pensado para usarse como una lista de pestañas con contenido especificado para cada elemento de la pestaña, puede haber casos en los que necesites definir elementos de pestaña donde el contenido sea independiente del contenido de la pestaña.

Al definir elementos de tabulación tienes la capacidad de aplicarles directivas. Por ejemplo, puedes usar esta funcionalidad para navegar entre vistas usando el Angular Router. El siguiente ejemplo mostrará cómo configurar eligx-tabs componente para que conmute entre tres componentes en un mismo router-enchufe.

Para empezar necesitamos un componente para contener nuestroigx-tabs componente y tres componentes de vista con contenido para 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 los mapeos de navegación apropiados en elapp-routing.module.ts archivo:

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, necesitamos declarar eligx-tabs componente y configurarlo para el enrutamiento. Asegúrate de añadir una salida router 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 unigx-tabs componente con tres elementos de pestaña. La cabecera de cada elemento de la pestaña tiene aplicada laRouterLink directiva, que se utiliza para especificar el enlace de enrutamiento utilizado para la navegación. Si alguno de los 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 pestaña seleccionado siempre estará sincronizado con la ruta actual de la URL.

Note

Por favor, ten en cuenta que la directiva RouterLink está configurada como eligx-tab-header, no directamente en eligx-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';

Siguiendo el enfoque más sencillo, creamos un nuevo tema que amplía eltabs-theme. Al pasar solo unos pocos parámetros base —como$item-background y$item-active-color— puedes estilizar tus pestañas con un esfuerzo mínimo. El tema generará automáticamente todos los colores de fondo y primer plano necesarios para los distintos estados de interacción.

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.

Si echamos un vistazo,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);

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.

Descripción general del componente Angular Tabs

Angular Tabs Example

Getting Started with Ignite UI for Angular Tabs

Using the Angular Tabs

Angular Tabs Alignment

Customizing Angular Tabs

Note

Integration With Router Outlet Container

Note

Styles

Tabs Theme Property Map

Note

Note

Demo

Styling with Tailwind

Note

API References

Theming Dependencies

Additional Resources

Tematización