Collapse

Apresentação

O componente Collapse é 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 { Collapse } from 'eitri-luminus';

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

// Collapse com checkbox
<Collapse checkbox>
  <Collapse.Title title="Seção 2" />
  <Collapse.Content>
    Conteúdo da seção 2
  </Collapse.Content>
</Collapse>

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

Propriedades

Collapse

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais para o container
id	string	Identificador único do componente
checkbox	boolean	Se deve usar checkbox para controle
tabIndex	number	Índice de tabulação do componente

Collapse.Title

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais para o título
title	string	Texto do título da seção

Collapse.Content

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

Heranças

O componente Collapse 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 Collapse expõe métodos públicos que podem ser acessados através de uma ref:

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

function MyComponent() {
  const collapseRef = useRef<Collapse>(null);

  const handleOpen = () => {
    collapseRef.current?.open();
  };

  const handleClose = () => {
    collapseRef.current?.close();
  };

  const handleToggle = () => {
    collapseRef.current?.toggle();
  };

  return (
    <>
      <Collapse ref={collapseRef} checkbox>
        <Collapse.Title title="Seção 1" />
        <Collapse.Content>
          Conteúdo da seção 1
        </Collapse.Content>
      </Collapse>
      <button onClick={handleOpen}>Abrir</button>
      <button onClick={handleClose}>Fechar</button>
      <button onClick={handleToggle}>Alternar</button>
    </>
  );
}

Métodos Disponíveis

Método	Tipo	Descrição
open()	void	Abre o collapse
close()	void	Fecha o collapse
toggle()	void	Alterna o estado do collapse
isOpen()	boolean	Retorna se o collapse está aberto

Observações

• O componente usa a classe 'collapse' para estilização base
• Pode ser controlado por checkbox ou por interação direta
• É 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
• Métodos via ref disponíveis para controle programático do collapse