Visão geral das guias Web Components

O Web Components Tabs é um componente leve e fácil de usar que organiza o conteúdo correspondente em um formato de aba ou uma coleção de abas normalmente colocadas horizontalmente. O Web Components Tab permite que os usuários finais cliquem facilmente e exibam diferentes visualizações. Há vários recursos e opções de personalização, como orientação de aba, modelos, estilos de cabeçalho integrados, animação, botões de rolagem e muito mais.

O Ignite UI for Web Components Tabs organiza e alterna entre conjuntos de dados semelhantes. As guias são colocadas no topo do conteúdo de dados. Quando uma guia é selecionada, o painel com o id correspondente é exibido. O componente pode ser usado apenas com guias definidas (sem nenhum painel).

Web Components Tabs Example

O exemplo de guias de Web Components abaixo exibe três guias diferentes alinhadas em uma única linha para que você possa navegar por cada uma delas de forma rápida e fácil.

How to use Tabs with Ignite UI for Web Components

Primeiro, você precisa instalar o Ignite UI for Web Components executando o seguinte comando:

npm install igniteui-webcomponents

import { defineComponents, IgcTabsComponent } from 'igniteui-webcomponents';

defineComponents(IgcTabsComponent);

Para uma introdução completa ao Ignite UI for Web Components, leia o tópico Introdução.

A declaração simples IgcTabsComponent é feita da seguinte maneira:

<igc-tabs>
    <igc-tab panel="first">Tab 1</igc-tab>
    <igc-tab panel="second">Tab 2</igc-tab>
    <igc-tab panel="third">Tab 3</igc-tab>
    <igc-tab-panel id="first">Panel 1</igc-tab-panel>
    <igc-tab-panel id="second">Panel 2</igc-tab-panel>
    <igc-tab-panel id="third">Panel 3</igc-tab-panel>
</igc-tabs>

Escolha

O IgcTabsComponent emite o evento Change quando o usuário seleciona um item pressionando uma tecla ou clicando. O método select permite que você selecione uma aba especificando seu painel como valor de string.

Se a guia selecionada não for especificada no carregamento inicial, a primeira guia que não estiver desabilitada será selecionada.

O comportamento padrão, que seleciona uma aba quando o usuário está navegando com as teclas de seta, pode ser modificado pela propriedade de activation. Definir como Manual focará a aba seguinte/anterior ao pressionar a tecla de seta, mas a aba será selecionada somente após pressionar Espaço ou Enter

Disabled Tab

Uma guia é desabilitada ao definir o atributo disabled:

<igc-tab panel="first" disabled>Tab 1</igc-tab>

Alignment

A propriedade alignment controla como as guias Web Components são posicionadas. Ela aceita os seguintes valores:

Start (padrão): a largura 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.
Center: a largura da aba depende do conteúdo e ocupa o centro do contêiner de abas.
End: a largura 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.
Justify: todas as abas têm a mesma largura e se ajustam completamente ao contêiner de abas.

Se o espaço não for suficiente para acomodar todas as guias, botões de rolagem serão exibidos.

Scrolling

Os botões de rolagem são exibidos quando o espaço disponível não é suficiente para renderizar todas as guias Web Components. O botão de início de rolagem é desabilitado se a primeira guia estiver em exibição. Respectivamente, quando a última guia estiver em exibição, o botão de fim de rolagem é desabilitado. Ao pressionar um dos botões de rolagem, as guias são roladas para que a guia naquela direção fique totalmente visível ou, se já estiver visível, a guia anterior/seguinte naquela direção seja exibida.

Chaves	Descrição
`←`	Seleciona a guia anterior (próxima no modo da direita para a esquerda). Se`activation` está definido para`Manual` foca somente a aba. Rola para o final se estiver na primeira aba.
`→`	Seleciona a próxima guia (anterior no modo da direita para a esquerda). Se`activation` está definido para`Manual` foca somente a aba. Rola para o início se estiver na última aba.
`Casa`	Seleciona a primeira aba.
`Fim`	Seleciona a última aba.
`Entrar` / `Espaço`	Seleciona a guia focada quando`activation` é`Manual`

Prefix / Suffix

Cada aba tem um slot padrão para exibir informações - ícone, texto ou ambos - e slots prefix e suffix para mostrar conteúdo adicional no início e/ou no final.

Styling

The IgcTabsComponent component exposes several CSS parts, giving you full control over its style:

Nome	Descrição
`headers`	O wrapper que inclui as guias e os botões de rolagem.
`headers-content`	O contêiner para as guias que representa o espaço disponível para renderização das guias.
`headers-wrapper`	O wrapper para as guias e o indicador selecionado.
`headers-scroll`	O contêiner para as guias.
`selected-indicator`	O indicador selecionado.
`start-scroll-button`	O botão de início de rolagem é exibido quando as guias transbordam.
`end-scroll-button`	O botão de fim de rolagem é exibido quando as guias transbordam.
`content`	O contêiner para o conteúdo onde os dados são exibidos.

O componente IgcTabComponent expõe as seguintes partes CSS:

Nome	Descrição
`content`	The content wrapper.
`prefix`	O wrapper de prefixo.
`suffix`	O wrapper de sufixo.

igc-tabs::part(headers-content) {
  background-color: var(--ig-gray-200);
}

igc-tab::part(content) {
  color: var(--ig-success-500);
}