Acordeão
Seções recolhíveis que permitem expandir apenas o conteúdo necessário, ideais para perguntas frequentes, listas de recursos e opções de configuração.
Seções recolhíveis — os leitores veem o título e expandem para ver os detalhes. Aceitam ícones, descrições e agrupamento.
Use Accordions quando:
- Perguntas frequentes — os usuários consultam as perguntas e expandem as respostas
- Listas de recursos — cada recurso recebe uma seção com detalhes
- Opções de configuração — agrupe as configurações por categoria
- Guias passo a passo com detalhes expansíveis
Uso
<Accordion title="Advanced Configuration">
Optional details go here.
</Accordion>Acordeão básico
Este conteúdo fica oculto até que o acordeão seja expandido.
Você pode incluir qualquer conteúdo aqui: texto, código, imagens ou outros componentes.
<Accordion title="Click to expand">
This content is hidden until the accordion is expanded.
You can include any content here: text, code, images, or other components.
</Accordion>Com descrição
Adicione um subtítulo com a prop description:
A documentação dos endpoints da API de autenticação aparece aqui.
<Accordion title="API Reference" description="Authentication endpoints">
Documentation for authentication API endpoints goes here.
</Accordion>Aberto por padrão
Comece expandido com defaultOpen:
Este acordeão começa aberto.
<Accordion title="Already Expanded" defaultOpen>
This accordion starts in the open state.
</Accordion>Com ícone
Opções de configuração e configurações.
<Accordion title="Settings" icon="gear">
Configuration options and settings.
</Accordion>Accordion vs Expandable
| Recurso | Accordion | Expandable |
|---|---|---|
| Ícones | Sim | Não |
| Descrições | Sim (subtítulo) | Não |
| Agrupamento | AccordionGroup | Independente |
| Peso visual | Mais pesado, semelhante a uma seção | Mais leve, integrado ao conteúdo |
| Mais indicado para | Perguntas frequentes, listas de recursos | Conteúdo complementar |
Regra prática: use Accordion quando as seções tiverem a mesma importância e os usuários escolherem entre elas. Use Expandable para detalhes opcionais que não precisam de destaque visual.
Props
Texto do cabeçalho do acordeão.
Subtítulo exibido abaixo do título.
Nome do ícone do Font Awesome (por exemplo, "gear", "settings").
Variante de estilo do ícone: light, regular ou solid.
Inicia no estado expandido.