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.

    EXAMPLE
    TS
    HTML
    SCSS

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

    EXAMPLE
    TS
    HTML
    SCSS

    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.

    EXAMPLE
    TS
    HTML

    App Builder | CTA Banner

    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:

    EXAMPLE
    TS
    HTML
    SCSS

    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.

    EXAMPLE
    TS
    HTML

    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.

    EXAMPLE
    TS
    HTML
    SCSS

    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

    EXAMPLE
    TS
    HTML
    SCSS

    API References

    Theming Dependencies

    Additional Resources

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