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)

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