Accordion

Apresentação

O componente Accordion é responsável por exibir conteúdo expansível e colapsável, permitindo que os usuários expandam ou recolham seções de conteúdo. É útil para organizar informações em seções que podem ser abertas ou fechadas conforme necessário.

Quando usar

• Para organizar conteúdo em seções expansíveis
• Para criar FAQs (Perguntas Frequentes)
• Para exibir informações detalhadas que podem ser ocultadas
• Para criar menus expansíveis
• Para organizar conteúdo longo em seções gerenciáveis
• Para implementar painéis expansíveis

Forma básica de uso

import { Accordion } from 'eitri-luminus';

// Accordion básico
<Accordion name="accordion1">
  <Accordion.Title>Seção 1</Accordion.Title>
  <Accordion.Content>
    Conteúdo da seção 1
  </Accordion.Content>
</Accordion>

// Accordion com seção aberta por padrão
<Accordion name="accordion2" defaultChecked>
  <Accordion.Title>Seção 2</Accordion.Title>
  <Accordion.Content>
    Conteúdo da seção 2
  </Accordion.Content>
</Accordion>

// Accordion com classes personalizadas
<Accordion name="accordion3" className="bg-base-200">
  <Accordion.Title className="text-primary">
    Seção 3
  </Accordion.Title>
  <Accordion.Content className="p-4">
    Conteúdo da seção 3
  </Accordion.Content>
</Accordion>

Propriedades

Accordion

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais para o container
name	string	Nome do grupo de accordions
defaultChecked	boolean	Se a seção deve estar aberta por padrão

Accordion.Title

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais para o título

Accordion.Content

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais para o conteúdo

Heranças

O componente Accordion 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 a classe 'collapse' para estilização base
• Múltiplos accordions podem ser agrupados usando a mesma propriedade 'name'
• Apenas uma seção pode estar aberta por vez dentro do mesmo grupo
• É possível personalizar a aparência usando classes do Tailwind
• O componente é responsivo por padrão
• Recomenda-se usar para organizar conteúdo em seções lógicas
• O componente suporta conteúdo rico, incluindo texto, imagens e outros componentes
• Ideal para FAQs e conteúdo que precisa ser organizado em seções