Visão geral do componente Angular Tabs

Ignite UI for Angular Tabs é um componente de interface de usuário completo que tem como objetivo principal organizar e agrupar conteúdo relacionado em uma única visualização com abas, economizando espaço e tornando o conteúdo mais compreensível. Ele reúne diferentes recursos como animações, modelos, opções de personalização e outros.

As guias no Angular são extremamente úteis quando você está criando uma página da web com muito conteúdo que deve ser encaixado em categorias e exibido de forma concisa e com economia de espaço.

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 é um exemplo básico de Angular Nested Tabs, onde temos uma aba dentro de outra, onde apenas uma visualização pode ser vista por vez. Usando abas aninhadas no Angular, podemos exibir informações de uma forma melhor e estruturada.

Getting Started with Ignite UI for Angular Tabs

Para começar a usar o componente Ignite UI for Angular Tabs, primeiro você precisa instalar Ignite UI for Angular. Em um aplicativo Angular existente, digite o seguinte comando:

ng add igniteui-angular

Para obter uma introdução completa ao Ignite UI for Angular, leia o tópico de introdução.

O próximo passo é importar issoIgxTabsModule no seu arquivo 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,16.0.0 você pode importarIgxTabsComponent como uma dependência independente ou usar oIGX_TABS_DIRECTIVES token para importar o componente e todos os seus componentes e diretivas de suporte.

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

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>

Se a amostra estiver configurada corretamente, o resultado final deverá ser semelhante a este:

Angular Tabs Alignment

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

• Início (padrão): a largura do cabeçalho da aba depende do conteúdo (rótulo, ícone, ambos) e todas as abas têm preenchimento igual. A primeira aba é alinhada ao lado esquerdo do contêiner de abas.
• Centro: a largura do cabeçalho da aba depende do conteúdo e ocupa o centro do contêiner de abas. Se o espaço não for suficiente para acomodar todos os itens, botões de rolagem são exibidos.
• Fim: a largura do cabeçalho da aba depende do conteúdo e todas as abas têm preenchimento igual. A última aba é alinhada ao lado direito do contêiner de abas.
• Justificar: todos os cabeçalhos de abas têm a mesma largura e se encaixam completamente no contêiner de abas. Se o espaço não for suficiente para encaixar todos os itens, botões de rolagem são exibidos.

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>

Se o exemplo estiver configurado corretamente, as guias deverão ficar como no exemplo a seguir:

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

Quando você modifica uma propriedade primária, todas as propriedades dependentes relacionadas são atualizadas automaticamente para refletir a alteração:

Material Fluente Bootstrap Anil

Propriedade primária	Propriedade dependente	Descrição
$item-contexto	$item-ativo-antecedentes	A cor usada para o fundo da aba ativa/foco.
	$item-text-color	A cor usada para a cor do texto da tabulação.
	$item-cor-ícone-	A cor usada para o ícone de aba.
	$item-hover-background	O fundo usado para as abas no passar o cursor.
	$indicator cor	A cor usada para o indicador de aba ativa.
	$button-fundo	A cor usada para o fundo dos botões.
	$button fundo do mouse	A cor usada para o fundo do botão ao passar o cursor.
$item-ativo-antecedentes	$item-ativo-ícone-cor	A cor usada para o ícone da aba ativa.
	$item-ativo-colorido	A cor usada para o texto das abas ativas.
	$tab-cor-ondulada	A cor usada para o fundo dos botões.
$item-text-color	$item-cor flutuante	A cor do texto usada para as abas ao passar o mouse se não for fornecida '$item-hover-background'
	$item-cor-ícone-	A cor usada para o ícone de aba caso não seja fornecida um '$item-fundo'
	$item-ativo-colorido	A cor usada para o texto das abas ativas não for fornecida '$item-ativo-fundo'
	$indicator cor	A cor usada para o indicador de aba ativa caso não seja fornecida '$item-fundo'
$item-cor-ícone-	$item-homover-ícone-cor	A cor usada para o ícone de aba ao passar o cursor.
	$item-ativo-ícone-cor	A cor usada para o ícone da aba ativa.
	$indicator cor	A cor usada para o indicador de aba ativa.
$button-fundo	$button fundo do mouse	A cor usada para o fundo do botão ao passar o cursor.
	$button cor	A cor usada para o ícone do botão/cor do texto.
$button cor	$button-desabilitado-cor	A cor usada para o ícone/texto do botão desativado.
	$button-cor-ondulada	A cor usada para o fundo do botão ao passar o cursor.
$button fundo do mouse	$button-hover-color	A cor usada para o ícone do botão/cor do texto ao passar o cursor.

Propriedade primária	Propriedade dependente	Descrição
$item-contexto	$item-ativo-antecedentes	A cor usada para o fundo da aba ativa/foco.
	$item-text-color	A cor usada para a cor do texto da tabulação.
	$item-cor-ícone-	A cor usada para o ícone de aba.
	$item-hover-background	O fundo usado para as abas no passar o cursor.
	$indicator cor	A cor usada para o indicador de aba ativa.
	$button-fundo	A cor usada para o fundo dos botões.
	$button fundo do mouse	A cor usada para o fundo do botão ao passar o cursor.
$item-ativo-antecedentes	$item-ativo-ícone-cor	A cor usada para o ícone da aba ativa.
	$item-ativo-colorido	A cor usada para o texto das abas ativas.
	$tab-cor-ondulada	A cor ondulada para a interação com aba.
$item-text-color	$item-cor flutuante	A cor do texto usada para as abas ao passar o mouse se não for fornecida '$item-hover-background'
	$item-cor-ícone-	A cor usada para o ícone de aba caso não seja fornecida um '$item-fundo'
	$item-ativo-colorido	A cor usada para o texto das abas ativas não for fornecida '$item-ativo-fundo'
	$indicator cor	A cor usada para o indicador de aba ativa caso não seja fornecida '$item-fundo'
$item-cor-ícone-	$item-homover-ícone-cor	A cor usada para o ícone de aba ao passar o cursor.
	$item-ativo-ícone-cor	A cor usada para o ícone da aba ativa.
	$indicator cor	A cor usada para o indicador de aba ativa.
$button-fundo	$button fundo do mouse	A cor usada para o fundo do botão ao passar o cursor.
	$button cor	A cor usada para o ícone do botão/cor do texto.
$button cor	$button-desabilitado-cor	A cor usada para o ícone/texto do botão desativado.
	$button-cor-ondulada	A cor usada para o fundo do botão ao passar o cursor.
$button fundo do mouse	$button-hover-color	A cor usada para o ícone do botão/cor do texto ao passar o cursor.

Propriedade primária	Propriedade dependente	Descrição
$item-contexto	$item-ativo-antecedentes	A cor usada para o fundo da aba ativa/foco.
	$item-text-color	A cor usada para a cor do texto da tabulação.
	$item-cor-ícone-	A cor usada para o ícone de aba.
	$item-hover-background	O fundo usado para as abas no passar o cursor.
	$indicator cor	A cor usada para o indicador de aba ativa.
	$button-fundo	A cor usada para o fundo dos botões.
	$button fundo do mouse	A cor usada para o fundo do botão ao passar o cursor.
	$border cor	A cor da borda das abas.
$item-ativo-antecedentes	$item-ativo-ícone-cor	A cor usada para o ícone da aba ativa.
	$item-ativo-colorido	A cor usada para o texto das abas ativas.
	$tab-cor-ondulada	A cor usada para o fundo dos botões.
$item-text-color	$item-cor flutuante	A cor do texto usada para as abas ao passar o mouse se não for fornecida '$item-hover-background'
	$item-cor-ícone-	A cor usada para o ícone de aba caso não seja fornecida um '$item-fundo'
	$button cor	A cor usada para o ícone do botão/cor do texto se não for fornecida um 'fundo $button' (não material)
$item-cor-ícone-	$item-homover-ícone-cor	A cor usada para o ícone de aba ao passar o mouse se não for fornecida '$item-hover-background'
	$item-text-color	A cor usada para a cor do texto da tabulação caso não seja fornecida '$item-fundo'
$button-fundo	$button fundo do mouse	A cor usada para o fundo do botão ao passar o cursor.
	$button cor	A cor usada para o ícone do botão/cor do texto.
$button cor	$button-hover-color	A cor usada para o ícone do botão/cor do texto ao passar o mouse caso não haja '$button-fundo' fornecida
	$button-desabilitado-cor	A cor usada para o ícone/texto do botão desativado.
	$button-cor-ondulada	A cor usada para o fundo do botão ao passar o cursor.
$button fundo do mouse	$button-hover-color	A cor usada para o ícone do botão/cor do texto ao passar o cursor.

Propriedade primária	Propriedade dependente	Descrição
$item-contexto	$item-ativo-antecedentes	A cor usada para o fundo da aba ativa/foco.
	$item-text-color	A cor usada para a cor do texto da tabulação.
	$item-cor-ícone-	A cor usada para o ícone de aba.
	$item-hover-background	O fundo usado para as abas no passar o cursor.
	$indicator cor	A cor usada para o indicador de aba ativa.
	$button-fundo	A cor usada para o fundo dos botões.
	$button fundo do mouse	A cor usada para o fundo do botão ao passar o cursor.
$item-ativo-antecedentes	$item-ativo-ícone-cor	A cor usada para o ícone da aba ativa.
	$item-ativo-colorido	A cor usada para o texto das abas ativas.
	$tab-cor-ondulada	A cor usada para o fundo dos botões.
$item-text-color	$item-cor flutuante	A cor do texto usada para as abas ao passar o mouse se não for fornecida '$item-hover-background'
	$item-cor-ícone-	A cor usada para o ícone de aba caso não seja fornecida um '$item-fundo'
	$item-ativo-colorido	A cor usada para o texto das abas ativas não for fornecida '$item-ativo-fundo'
	$indicator cor	A cor usada para o indicador de aba ativa caso não seja fornecida '$item-fundo'
$item-cor-ícone-	$item-homover-ícone-cor	A cor usada para o ícone de aba ao passar o cursor.
	$item-ativo-ícone-cor	A cor usada para o ícone da aba ativa.
	$indicator cor	A cor usada para o indicador de aba ativa.
$button-fundo	$button fundo do mouse	A cor usada para o fundo do botão ao passar o cursor.
	$button cor	A cor usada para o ícone do botão/cor do texto.
$button cor	$button-desabilitado-cor	A cor usada para o ícone/texto do botão desativado.
	$button-cor-ondulada	A cor usada para o fundo do botão ao passar o cursor.
$button fundo do mouse	$button-hover-color	A cor usada para o ícone do botão/cor do texto ao passar o cursor.

Para começar a estilizar as abas, precisamos importar o módulo de temas, onde todas as funções do tema e mixins de componentes ficam:

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

Você pode, é claro, substituir quaisquer parâmetros adicionais para ajustar ainda mais a aparência.

$dark-tabs: tabs-theme(
  $item-background: #292826,
  $item-active-color: #F4D45C,
);

Note

Em vez de codificar os valores de cor como acabamos de fazer, podemos alcançar maior flexibilidade em termos de cores usando aspalette funções e.color Por favor, consulte oPalettes tópico para orientações detalhadas sobre como usá-los.

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 estilizar qualquer componente usado como parte do conteúdo de uma guia, temas adicionais devem ser criados específicos para o respectivo componente.

O último passo é incluir o tema do componente em nosso aplicativo.

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

Demo

Styling with Tailwind

Você pode estilizar as abas usando nossas classes utilitárias personalizadas do Tailwind. Certifique-se de configurar o Tailwind primeiro.

Junto com a importação de vento de cauda em sua folha de estilo global, você pode aplicar os utilitários de tema desejados da seguinte maneira:

@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

O arquivo utilitário inclui tantolight as variantes quantodark as do tema.

• Uselight-* as aulas para o tema da luz.
• Usedark-* classes para o tema sombrio.
• Adicione o nome do componente após o prefixo, por exemplo,light-tabs,dark-tabs.

Uma vez aplicadas, essas classes possibilitam cálculos dinâmicos de temas. A partir daí, você pode sobrescrever as variáveis CSS geradas usandoarbitrary properties. Após os dois-pos, forneça qualquer formato de cor CSS válido (HEX, variável CSS, RGB, etc.).

Você pode encontrar a lista completa de propriedades no Tema IgxTabs. A sintaxe é a seguinte:

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

Note

O ponto de exclamação(!) é necessário para garantir que a classe utilitária tenha prioridade. O Tailwind aplica estilos em camadas e, sem marcar esses estilos como importantes, eles serão substituídos pelo tema padrão do componente.

No final, suas abas devem ficar assim:

API References

• Componente IgxIcon
• Componente IgxNavbar
• Componente IgxTabs
• Estilos de componentes IgxTabs
• Componente IgxTabItem
• Componente IgxTabHeader
• Componente de conteúdo IgxTab

Theming Dependencies

• Tema IgxIcon
• Tema IgxRipple
• Tema IgxButton

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

• Ignite UI for Angular Fóruns
• Ignite UI for Angular GitHub