Tab

Apresentação

O componente Tab é responsável por criar uma interface de abas para organizar e alternar entre diferentes seções de conteúdo. Ele permite uma navegação clara e intuitiva entre diferentes partes do conteúdo, mantendo a interface organizada e fácil de usar.

Quando usar

• Para organizar conteúdo em seções
• Para criar interfaces com múltiplas visualizações
• Para implementar navegação por abas
• Para separar conteúdo relacionado
• Para criar painéis de configuração
• Para implementar wizards ou assistentes

Forma básica de uso

import { Tab } from 'eitri-luminus';

// Tabs básicas
<Tab>
  <Tab.Content label="Aba 1" name="tabs" defaultChecked>
    Conteúdo da Aba 1
  </Tab.Content>
  <Tab.Content label="Aba 2" name="tabs">
    Conteúdo da Aba 2
  </Tab.Content>
  <Tab.Content label="Aba 3" name="tabs">
    Conteúdo da Aba 3
  </Tab.Content>
</Tab>

// Tabs com classes personalizadas
<Tab className="tabs-boxed">
  <Tab.Content
    label="Configurações"
    name="settings"
    defaultChecked
    tabClassName="tab-primary"
  >
    <div className="p-4">
      Configurações do sistema
    </div>
  </Tab.Content>
  <Tab.Content
    label="Perfil"
    name="settings"
    tabClassName="tab-secondary"
  >
    <div className="p-4">
      Informações do perfil
    </div>
  </Tab.Content>
</Tab>

// Tabs com IDs personalizados
<Tab>
  <Tab.Content
    label="Documentos"
    name="docs"
    tabId="docs-tab-1"
    defaultChecked
  >
    Lista de documentos
  </Tab.Content>
  <Tab.Content
    label="Histórico"
    name="docs"
    tabId="docs-tab-2"
  >
    Histórico de alterações
  </Tab.Content>
</Tab>

Propriedades

Tab

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais para o container
id	string	Identificador único do componente

Tab.Content

Propriedade	Tipo	Descrição
label	string	Texto exibido na aba
name	string	Nome do grupo de abas (deve ser o mesmo para abas relacionadas)
defaultChecked	boolean	Define se a aba deve estar selecionada por padrão
tabId	string	ID único para a aba
tabClassName	string	Classes CSS adicionais para a aba
className	string	Classes CSS adicionais para o conteúdo
id	string	Identificador único do componente

Heranças

O componente Tab e seus subcomponentes herdam todas as propriedades comuns da biblioteca através da interface CommonProps, que inclui:

• Propriedades de estilo (margin, padding, etc)
• Propriedades de layout (flex, grid, etc)
• Propriedades de posicionamento
• Propriedades de acessibilidade
• Propriedades de identificação (id, data-e)

Métodos via Ref

O componente Tab expõe métodos públicos que podem ser acessados através de uma ref:

import { useRef } from 'react';
import { Tab } from 'eitri-luminus';

function MyComponent() {
  const tabRef = useRef<Tab>(null);

  const handleNextTab = () => {
    const currentIndex = tabRef.current?.getCurrentTabIndex() || 0;
    const totalTabs = tabRef.current?.getTotalTabs() || 0;
    if (currentIndex < totalTabs - 1) {
      tabRef.current?.switchTab(currentIndex + 1);
    }
  };

  return (
    <>
      <Tab ref={tabRef}>
        <Tab.Content label="Aba 1" name="tabs" defaultChecked>
          Conteúdo 1
        </Tab.Content>
        <Tab.Content label="Aba 2" name="tabs">
          Conteúdo 2
        </Tab.Content>
      </Tab>
      <button onClick={handleNextTab}>Próxima Aba</button>
    </>
  );
}

Métodos Disponíveis

Método	Tipo	Descrição
switchTab(index: number)	void	Alterna para a aba no índice especificado
getCurrentTabIndex()	number	Retorna o índice da aba atualmente selecionada (-1 se nenhuma)
getTotalTabs()	number	Retorna o número total de abas

Observações

• O componente usa radio buttons para controle de estado
• Mantém a semântica HTML usando roles apropriados
• É possível personalizar a aparência usando classes do Tailwind
• O componente é responsivo por padrão
• Suporta múltiplos grupos de abas na mesma página
• Ideal para organização de conteúdo em seções
• Permite estilização personalizada das abas e do conteúdo
• Mantém a acessibilidade com labels e roles apropriados
• Suporta conteúdo rico dentro das abas
• Pode ser combinado com outros componentes para criar interfaces complexas
• Métodos via ref disponíveis para controle programático das abas