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.

O componente igx-tabs no Ignite UI for Angular é usado para organizar ou alternar entre conjuntos de dados semelhantes. Ele funciona como um wrapper para igx-tab-item que representam respectivamente o contêiner para os dados e o cabeçalho da guia. O Angular Tabs Component coloca as guias no topo e permite a rolagem quando há vários itens de guia 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 o IgxTabsModule 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 {}

Como alternativa, a partir da 16.0.0, você pode importar o IgxTabsComponent como uma dependência autônoma ou usar o token IGX_TABS_DIRECTIVES 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 {}

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

Using the Angular Tabs

Definimos o cabeçalho Angular Tabs fornecendo conteúdo para igx-tab-header. Para definir o nome da aba, simplesmente adicionamos um span com a diretiva igxTabHeaderLabel. Qualquer conteúdo que aparecerá como conteúdo de um item de aba deve ser adicionado entre as tags igx-tab-content.

<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 A propriedade input controla como as guias são posicionadas e organizadas. Ela aceita quatro valores diferentes - start, center, end e 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.

O exemplo abaixo demonstra como as guias são alinhadas ao alternar entre os valores da propriedade tabAlignment.

Customizing Angular Tabs

Vamos modificar as abas e torná-las mais atraentes incluindo ícones usando a diretiva igxTabHeaderIcon. O componente igx-tabs é compatível com os ícones do Material Design, então será muito fácil adotá-los em sua aplicação.

Note

Se você não usou o igx-icon em seu aplicativo até agora, certifique-se de importar o IgxIconModule no app.module.ts antes de prosseguir.

Primeiro, adicione os Material Icons no seu arquivo 'styles.scss' na pasta principal do aplicativo. Em seguida, adicione igx-icon com a diretiva igxTabHeaderIcon definida, como um filho de 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:

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

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

Integration With Router Outlet Container

Embora o componente igx-tabs deva ser usado como uma lista de guias com conteúdo especificado para cada item de guia, pode haver casos em que você precise definir itens de guia em que o conteúdo seja separado do conteúdo da guia.

Ao definir itens de tabulação, você tem a capacidade de aplicar diretivas a eles. Por exemplo, você pode usar essa funcionalidade para obter navegação entre visualizações usando o Angular Router. O exemplo a seguir demonstrará como configurar o componente igx-tabs para alternar entre três componentes em um único router-outlet.

Para começar, precisamos de um componente para segurar nosso componente igx-tabs 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 modelos 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 no arquivo 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 { }

Agora que temos todas as rotas de navegação configuradas, precisamos declarar o componente igx-tabs e configurá-lo para roteamento. Certifique-se de adicionar um router-outlet para renderizar os componentes de 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 um componente igx-tabs com três itens de aba. O cabeçalho de cada item de aba tem a diretiva RouterLink aplicada, que é usada para especificar o link de roteamento usado para a navegação. Se algum dos links se tornar ativo, o item de aba correspondente terá sua propriedade selected definida devido à vinculação à propriedade isActive da diretiva RouterLinkActive. Dessa forma, o item de aba selecionado sempre será sincronizado com o caminho de url atual.

Note

Observe que a diretiva routerLink é definida para igx-tab-header, não diretamente para igx-tab-item.

Styles

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 o tabs-theme e aceita várias propriedades que nos permitem estilizar os grupos de guias.

$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
);

Note

Em vez de codificar os valores de cor como acabamos de fazer, podemos obter maior flexibilidade em termos de cores usando as palette funções e color. Consulte o Palettes tópico para obter orientações detalhadas sobre como usá-los.

Se dermos uma olhada no tabs-theme, perceberemos que há ainda mais propriedades disponíveis para estilizar 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

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