Vox Mente
Navegação

Componentes

Collapsible

beta

Uma unidade que abre e fecha, sem coordenação com irmãos. Se vários precisam se coordenar, o componente é o Accordion.

Ainda não é estável porque Pendência editorial: oQueE, quandoUsar, quandoNaoUsar; Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.

@voxmente/ui/components/ui/collapsible

Playground
<Collapsible>
  <CollapsibleTrigger>Anotações da sessão</CollapsibleTrigger>
  <CollapsibleContent>
    O aluno reconheceu 8 de 10 palavras novas.
  </CollapsibleContent>
</Collapsible>

Anatomia

As partes deste componente e como se aninham. A árvore vem das demonstrações desta página, então descreve um exemplo que renderiza.
Collapsible
  └─ CollapsibleTrigger
  └─ CollapsibleContent

Uso

Esconde ou revela um bloco de conteúdo isolado. Não coordena irmãos — cada Collapsible só sabe do próprio estado.
O aluno reconheceu 8 de 10 palavras novas. Reforçar sílabas com R na próxima sessão.

Diferença para o Accordion

Accordion coordena vários itens — abrir um pode fechar outro. Collapsible é uma unidade única, sem grupo e sem contexto compartilhado.

Fechado por padrão

Sem `defaultOpen`, o conteúdo começa oculto. Use quando a informação é secundária e não precisa aparecer de cara.

Referência da API

Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.

Collapsible, CollapsibleContent, CollapsibleTrigger não têm props próprias — aceitam apenas as props herdadas, incluindo className e os atributos de DOM.

Pendência editorial: o que é, quando usar, quando não usar, acessibilidade, componentes relacionados, exemplo em contexto de produto. A lacuna aparece aqui em vez de ser preenchida com orientação inventada.

Origem do dado
  • Anatomia: exemplo desta página
  • Demonstrações e playground: componente real de @voxmente/ui
  • Referência da API: TypeScript do pacote
  • Cor, espaçamento e raio das demonstrações: tokens de theme.css