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.

As guias Ignite UI for Web Components organizam e alternam entre conjuntos de dados semelhantes. As guias são colocadas na parte superior do conteúdo de dados. Quando uma guia é selecionada, seu conteúdo correspondente é exibido.

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

A declaração simplesIgcTabsComponent é feita da seguinte forma:

<igc-tabs>
    <igc-tab>
      <div slot="label">Tab 1</div>
      <span>Content for tab 1</span>
    </igc-tab>
    <igc-tab>
      <div slot="label">Tab 2</div>
      <span>Content for tab 2</span>
    </igc-tab>
    <igc-tab>
      <div slot="label">Tab 3</div>
      <span>Content for tab 3</span>
    </igc-tab>
</igc-tabs>

Escolha

OIgcTabsComponent evento emiteChange quando o usuário seleciona um item, seja por pressão de tecla ou clique. Oselect método permite selecionar uma aba especificando oIgcTabComponent ou seu id.

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 navega com as setas tecladas, pode ser modificado pelaactivation propriedade. Configurar paraManual vai focar a aba próxima/anterior no pressionar a tecla de seta, mas a aba só será selecionada após pressionar SPACE ou ENTER

Disabled Tab

Uma tabulação é desativada ao definir odisabled atributo:

<igc-tab disabled>Tab 1</igc-tab>

Alignment

Aalignment propriedade controla como Web Components abas estão posicionadas. Aceita os seguintes valores:

Start(padrão): a largura da aba depende do conteúdo (etiqueta, ícone, ambos) e todas as abas têm enchimento igual. A primeira aba está alinhada ao lado esquerdo do contêiner das abas.
Center: a largura da aba depende do conteúdo e ocupa o centro do contêiner da aba .
End: a largura da aba depende do conteúdo e todas as abas têm enchimento igual. A última aba está alinhada ao lado direito do contêiner das abas.
Justify: todas as abas têm a mesma largura e se encaixam totalmente no recipiente das 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.
`ENTER` / `SPACE`	Seleciona a guia focada quando`activation` é`Manual`

Prefix / Suffix

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

Styling

OIgcTabsComponent componente expõe várias partes do CSS, dando controle total sobre seu estilo:

Nome	Descrição
`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.

OIgcTabComponent componente expõe as seguintes partes CSS:

Nome	Descrição
`content`	Contêiner de slot de rótulo do cabeçalho da guia.
`prefix`	Prefixo do rótulo do cabeçalho da guia.
`suffix`	Sufixo do rótulo do cabeçalho da guia.
`tab-header`	O cabeçalho de uma única guia.
`tab-body`	Contém o conteúdo do corpo de uma única guia, somente o corpo da guia selecionada é visível.

igc-tab::part(tab-header),
igc-tabs::part(inner)::after {
    --item-background: var(--ig-surface-600);
    --border-color: var(--ig-success-300);
}

igc-tab::part(tab-body),
igc-tab[selected] igc-icon {
    --item-active-icon-color: var(--ig-success-300);
}

igc-tab:not([selected]) igc-icon {
    --item-icon-color: var(--ig-gray-500);
}

igc-tabs::part(start-scroll-button),
igc-tabs::part(end-scroll-button) {
    --background: var(--ig-surface-600);
    --hover-background: var(--ig-surface-700);
    --active-background: var(--ig-surface-700);
    --disabled-background: var(--ig-gray-100);
    --button-color: var(--ig-gray-700);
    --button-hover-color: var(--ig-gray-800);
    --button-disabled-color: var(--ig-gray-300);
    --border-color: var(--ig-surface-600);
}

igc-tab::part(tab-header) {
    --item-hover-color: var(--ig-success-500);
}

igc-tab::part(tab-header)::before {
    --border-color--hover: var(--ig-gray-500);
}