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.

Oigx-tabs componente em Ignite UI for Angular é usado para organizar ou alternar entre conjuntos de dados semelhantes. Ele funciona como um wrapperigx-tab-item para o qual representam respectivamente o contêiner dos dados e o cabeçalho de tabulação. O Angular Tabs Component posiciona as abas no topo e permite rolar quando há múltiplos itens de aba na tela.

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/tabs';
// 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/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 {}

Agora que você importou o módulo ou diretivas Ignite UI for Angular Tabs, pode começar a usar oigx-tabs componente.

Using the Angular Tabs

Definimos o cabeçalho Angular Abas fornecendo conteúdo paraigx-tab-header. Para definir o nome da aba, simplesmente adicionamos um span comigxTabHeaderLabel diretiva. Qualquer conteúdo que apareça como conteúdo de um item de tabulação deve ser adicionado entreigx-tab-content as 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 tabAlignmentA propriedade de entrada controla como as abas são posicionadas e organizadas. Aceita quatro valores diferentes - começar, centralizar, terminar e justificar.

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.

O exemplo abaixo demonstra como as abas se alinham ao alternar entretabAlignment valores de propriedade.

Customizing Angular Tabs

Vamos modificar as abas e torná-las mais atraentes incluindo ícones usando aigxTabHeaderIcon diretiva. Oigx-tabs componente é compatível com os Materials Design Icons, então será muito fácil adotá-los na sua aplicação.

Note

Se você ainda não usou oigx-icon conteúdo na sua inscrição, por favor, certifique-se de importar noIgxIconModule app.module.ts antes de prosseguir.

Primeiro, adicione os Ícones de Material no seu arquivo 'styles.scss' na pasta principal do aplicativo. Em seguida, adicioneigx-icon comigxTabHeaderIcon conjunto de diretivas, como filho 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>

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

Se definir as etiquetas e ícones não for suficiente, você também pode fornecer seu próprio conteúdo personalizado diretamente entreigx-tab-header as 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>

Você também pode adicionar seu próprio prefixo e sufixo personalizados de cabeçalho de aba simplesmente usandoigxPrefix as diretrizes de andigxSuffix. O exemplo abaixo demonstra como adicionar uma aba com conteúdo de cabeçalho personalizado e prefixo/sufixo.

Integration With Router Outlet Container

Embora oigx-tabs componente seja destinado a ser usado como uma lista de abas com conteúdo especificado para cada item de aba, podem haver casos em que você precise definir itens de aba onde o conteúdo é separado do conteúdo da aba.

Ao definir itens de tabulação, você tem a capacidade de aplicar diretivas a eles. Por exemplo, você pode usar essa funcionalidade para navegar entre vistas usando o Angular Roteador. O exemplo a seguir demonstrará como configurar oigx-tabs componente para alternar entre três componentes em uma única tomada roteadora.

Para começar, precisamos de um componente para manter nossoigx-tabs componente e três componentes de visualização com algum conteúdo para fins de demonstração. Para simplificar, os componentes de visualização têm templates muito curtos.

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

Em seguida, criamos os mapeamentos de navegação apropriados noapp-routing.module.ts arquivo:

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

Agora que temos todas as rotas de navegação configuradas, precisamos declarar oigx-tabs componente e configurá-lo para roteamento. Certifique-se de adicionar uma tomada de roteador para renderizar os componentes da visualização.

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

O código acima cria umigx-tabs componente com três itens de aba. O cabeçalho de cada item tab tem aRouterLink diretriz aplicada, que é usada para especificar o link de roteamento usado para a navegação. Se algum dos links se tornar ativo, o item de tabulação correspondente terá suaselected propriedade definida devido à vinculação àRouterLinkActive propriedade daisActive diretiva. Dessa forma, o item de aba selecionado estará sempre sincronizado com o caminho da URL atual.

Note

Por favor, note que a diretiva RouterLink está definida para oigx-tab-header, não diretamente para oigx-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';

Seguindo a abordagem mais simples, criamos um novo tema que estende otabs-theme. Ao passar apenas alguns parâmetros básicos — como$item-background e$item-active-color— você pode estilizar suas abas com esforço mínimo. O tema gerará automaticamente todas as cores de fundo e primeiro plano necessárias para os vários estados de interação.

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.

Se dermos uma olhada,tabs-theme notaremos que há ainda mais propriedades disponíveis para personalizar nossas abas.

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.

Visão geral do 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

Temas