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.

    The Ignite UI for Web Components Tabs organizes and switches between similar data sets. The tabs are placed at the top of the data content. When a tab is selected its corresponding content is displayed.

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

    The IgcTabsComponent emits Change event when the user selects an item either by key press or click. The select method allows you to select a tab by specifying the IgcTabComponent or its 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 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 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.

    Keyboard Navigation

    Chaves Descrição
    ← Seleciona a guia anterior (próxima no modo da direita para a esquerda). Seactivation está definido paraManual 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). Seactivation está definido paraManual 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 quandoactivation é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

    O IgcTabsComponent componente expõe várias partes CSS, dando a você 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.

    O componente IgcTabComponent expõe as seguintes partes CSS:

    Nome Descrição
    content Tab header's label slot container.
    prefix Tab header's label prefix.
    suffix Tab header's label suffix.
    tab-header The header of a single tab.
    tab-body Holds the body content of a single tab, only the body of the selected tab is visible. 
    igc-tab::part(tab-header) {
  background-color: var(--ig-gray-200);
}

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

    API Reference

    Additional Resources