Expandable
Expandable cria um controle simples para mostrar ou ocultar conteúdo que os leitores podem querer ver, mas que não é essencial ao fluxo principal.
Use Expandable para ocultar respostas detalhadas da API, etapas de solução de problemas ou informações complementares que, de outra forma, interromperiam o fluxo de leitura. Ele é renderizado como uma única caixa de expansão clicável. É mais simples que Accordion, que foi desenvolvido para seções agrupadas e navegáveis.
Use Expandable quando:
- Detalhes complementares interromperiam a narrativa principal
- Informações opcionais forem úteis para alguns leitores, mas não para todos
- Conteúdo extenso (como respostas completas da API) dever ser recolhido por padrão
Uso básico
<Expandable title="Show more details">
These details are hidden by default and revealed when clicked.
</Expandable>Aberto por padrão
Comece expandido:
Esta seção começa visível.
<Expandable title="Expanded by default" defaultOpen>
This section starts visible.
</Expandable>Casos de uso comuns
Detalhes da resposta da API
Recolha respostas detalhadas que, de outra forma, interromperiam o fluxo da documentação:
Etapas de solução de problemas
Props
Texto do cabeçalho da seção.
Inicia expandido.
Expandable vs Accordion
| Recurso | Expandable | Accordion |
|---|---|---|
| Finalidade | Ocultar conteúdo complementar | Organizar seções de igual importância |
| Ícones | Não | Sim |
| Descrições | Não | Sim (suporte a subtítulo) |
| Agrupamento | Independente | Pode ser agrupado com AccordionGroup |
| Ideal para | Detalhes opcionais, exemplos longos | Perguntas frequentes, listas de recursos, navegação |
Regra geral: Se o conteúdo for "bom ter", use Expandable. Se os usuários precisarem escolher entre seções, use Accordion.