Vox Mente
Navegação

Componentes

Accordion

beta

Revela detalhe sob demanda, sem tirar o leitor da página. Se os recortes são paralelos e um exclui o outro, use Tabs.

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/accordion

Playground

Até cinco dias úteis após o fechamento do trimestre.

<Accordion defaultValue={["prazo"]}>
  <AccordionItem value="prazo">
    <AccordionTrigger>Qual o prazo para lançar notas?</AccordionTrigger>
    <AccordionContent>…</AccordionContent>
  </AccordionItem>
  <AccordionItem value="acesso">
    <AccordionTrigger>Como redefinir o acesso de um professor?</AccordionTrigger>
    <AccordionContent>…</AccordionContent>
  </AccordionItem>
</Accordion>

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.
Accordion
  └─ AccordionItem
    └─ AccordionTrigger
    └─ AccordionContent
  └─ AccordionItem
    └─ AccordionTrigger
    └─ AccordionContent
  └─ AccordionItem
    └─ AccordionTrigger
    └─ AccordionContent

Uso

Revela detalhe sob demanda. Só um item aberto por vez, por padrão — a pergunta seguinte substitui a anterior.

Até cinco dias úteis após o fechamento do trimestre. O sistema bloqueia edição depois disso.

Múltiplos abertos

`multiple` no `Accordion` permite mais de um item aberto ao mesmo tempo. `defaultValue` vira uma lista com todos os valores que começam expandidos.

Até cinco dias úteis após o fechamento do trimestre.

A coordenação envia um novo convite pela tela de equipe.

Todos fechados

Sem `defaultValue`, o accordion abre vazio. Use quando nenhuma pergunta é mais provável que outra.

Item desabilitado

Uma pergunta sem resposta ainda válida (ex.: recurso fora do plano da escola) fica visível e travada, em vez de sumir da lista.

Até cinco dias úteis após o fechamento do trimestre.

Referência da API

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

Accordion, AccordionContent, AccordionItem, AccordionTrigger 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