componentes / accordion
Accordion
Pilha de seções que expandem e recolhem, com navegação por teclado.
Como usar
`type="single"` mantém uma seção aberta (adicione `collapsible` para poder fechá-la); `type="multiple"` permite várias abertas. Use `defaultValue` ou `value` + `onValueChange` (string para single, `string[]` para multiple). Setas cima/baixo, Home e End movem o foco entre os cabeçalhos.
preview
Accordion.tsx
import { Accordion, AccordionItem } from "vaiperui"; <Accordion type="single" collapsible defaultValue="payment"> <AccordionItem value="payment" title="Quais formas de pagamento?"> Aceitamos cartão de crédito, boleto e Pix. </AccordionItem></Accordion>Múltiplo
preview
multiplo.tsx
<Accordion type="multiple" defaultValue={["payment", "shipping"]}>…</Accordion>Cores
preview
cores.tsx
<Accordion type="single" variantColor="primary">…</Accordion><Accordion type="single" variantColor="success">…</Accordion><Accordion type="single" variantColor="warning">…</Accordion><Accordion type="single" variantColor="danger">…</Accordion>Props
| Prop | Valores | Padrão | Descrição |
|---|---|---|---|
| type | single | multiple | obrigatório | Uma ou várias seções abertas |
| collapsible | boolean | false | Só single: permite fechar a seção aberta |
| value / defaultValue | string | string[] | nenhum | Valor(es) aberto(s), controlado / inicial |
| onValueChange | (value) => void | nenhum | Chamado com o(s) novo(s) valor(es); "" quando o single fecha |
| variantColor | primary | success | warning | danger | primary | Cor do anel de foco |
| customColor | string | { light, dark } | nenhum | Qualquer cor CSS (ou um par por tema) para o anel de foco |
| animation | none | smooth | fast | bounce | smooth | Transição do ícone |
| value (item) | string | obrigatório | Identificador do AccordionItem |
| title (item) | ReactNode | obrigatório | Cabeçalho do AccordionItem |
| disabled (item) | boolean | false | Não pode ser expandido nem focado |
| (nativas) | div | nenhum | Todas as props nativas do elemento, className, ref etc. |