Visão geral das guias do React

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

    As guias Ignite UI for React 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.

    React Tabs Example

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

    How to use Tabs with Ignite UI for React

    Primeiro, você precisa instalar o pacote npm Ignite UI for React correspondente executando o seguinte comando:

    npm install igniteui-react

    Antes de usá-losIgrTabs, você precisa importá-lo da seguinte forma:

    import { IgrTabs, IgrTab } from "igniteui-react";

    Para uma introdução completa ao Ignite UI for React, leia o tópico Comecando.

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

    <IgrTabs>
    <IgrTab label="Tab 1">
      <span>Panel 1</span>
    </IgrTab>
    <IgrTab label="Tab 2">
      <span>Panel 2</span>
    </IgrTab>
    <IgrTab label="Tab 3">
      <span>Panel 3</span>
    </IgrTab>
</IgrTabs>

    Escolha

    OIgrTabs 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 oIgrTab 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:

    <IgrTab disabled={true}>Tab 1</IgrTab>

    Alignment

    Aalignment propriedade controla como React 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 mostrados quando o espaço disponível não é suficiente para renderizar todas as React guias. O botão de rolagem inicial será desativado se a primeira guia estiver em exibição. Respectivamente, quando a última guia está em exibição, o botão de rolagem final é desativado. Ao pressionar um dos botões de rolagem, as guias são roladas para que a guia nessa direção fique totalmente visível ou, se já estiver visível, a guia anterior/seguinte nessa 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.
    ENTER / SPACE Seleciona a guia focada quandoactivation é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

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

    OIgrTab 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) {
  background-color: var(--ig-gray-200);
}

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

    API Reference

    Additional Resources