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.
El igx-tabs
componente de Ignite UI for Angular se utiliza para organizar o cambiar entre conjuntos de datos similares. Funciona como un contenedor para igx-tab-item
el que representan respectivamente el contenedor de los datos y el encabezado de la pestaña. El componente Angular pestañas coloca las 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 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.
Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.
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
cmd
Para obtener una introducción completa al 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 {}
typescript
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 {}
typescript
Ahora que tiene el módulo o las directivas Ignite UI for Angular Tabs importados, puede comenzar a usar el igx-tabs
componente.
Using the Angular Tabs
Establecemos el encabezado Angular Tabs proporcionando contenido a igx-tab-header
. Para establecer el nombre de la pestaña, simplemente agregamos un intervalo con igxTabHeaderLabel
la directiva. Cualquier contenido que aparezca como el contenido de un elemento de pestaña debe agregarse entre igx-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>
html
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.
En el ejemplo siguiente se muestra cómo se alinean las pestañas al cambiar entre tabAlignment
valores de propiedad.
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.
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');
...
css
<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>
html
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>
html
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 capacidad de aplicarles directivas. Por ejemplo, puede utilizar esta funcionalidad para lograr la navegación entre vistas mediante el enrutador Angular. El siguiente ejemplo demostrará cómo configurar el igx-tabs
componente 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 { }
typescript
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 { }
typescript
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>
html
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.
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';
scss
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
);
scss
En lugar de codificar los valores de color como acabamos de hacer, podemos lograr una mayor flexibilidad en términos de colores mediante el uso de las palette
funciones y color
. Consulte el Palettes
tema para obtener orientación detallada sobre cómo usarlos.
Si echamos un vistazo al tabs-theme
, notaremos que hay aún más propiedades disponibles para diseñar nuestras pestañas.
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);
scss
Demo
API References
- Componente IgxIcon
- Componente IgxNavbar
- Componente IgxTabs
- Estilos de componentes IgxTabs
- Componente IgxTabItem
- Componente IgxTabHeader
- Componente de contenido IgxTab
Theming Dependencies
Additional Resources
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.