componentes / accordion
Accordion
Pila de secciones que se expanden y colapsan, con navegación por teclado.
Cómo usar
`type="single"` mantiene una sección abierta (agrega `collapsible` para poder cerrarla); `type="multiple"` permite varias abiertas. Usa `defaultValue` o `value` + `onValueChange` (string para single, `string[]` para multiple). Flechas arriba/abajo, Home y End mueven el foco entre encabezados.
preview
Accordion.tsx
import { Accordion, AccordionItem } from "vaiperui"; <Accordion type="single" collapsible defaultValue="payment"> <AccordionItem value="payment" title="¿Qué formas de pago?"> Aceptamos tarjeta de crédito, boleto y Pix. </AccordionItem></Accordion>Múltiple
preview
multiple.tsx
<Accordion type="multiple" defaultValue={["payment", "shipping"]}>…</Accordion>Colores
preview
colores.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 | Predeterminado | Descripción |
|---|---|---|---|
| type | single | multiple | obligatorio | Una o varias secciones abiertas |
| collapsible | boolean | false | Solo single: permite cerrar la sección abierta |
| value / defaultValue | string | string[] | ninguno | Valor(es) abierto(s), controlado / inicial |
| onValueChange | (value) => void | ninguno | Llamado con el/los nuevo(s) valor(es); "" cuando el single cierra |
| variantColor | primary | success | warning | danger | primary | Color del anillo de foco |
| customColor | string | { light, dark } | ninguno | Cualquier color CSS (o un par por tema) para el anillo de foco |
| animation | none | smooth | fast | bounce | smooth | Transición del ícono |
| value (item) | string | obligatorio | Identificador del AccordionItem |
| title (item) | ReactNode | obligatorio | Encabezado del AccordionItem |
| disabled (item) | boolean | false | No se puede expandir ni enfocar |
| (nativas) | div | ninguno | Todas las props nativas del elemento, className, ref, etc. |