Un conjunto de encabezados interactivos que permiten mostrar u ocultar secciones de contenido relacionado.
Single · Multiple · Sizes · Rich Content
Importa los estilos base y los componentes del Accordion.
1import 'nave-ui-library/styles.css'2import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from 'nave-ui-library/react'Por defecto, el acordeón permite abrir una sección a la vez. El contenedor mantiene un ancho constante.
Los triggers pueden contener estructuras complejas como badges y textos enriquecidos.
Props disponibles para el Accordion.
| Prop | Type | Default | Description |
|---|---|---|---|
type | "single" | "multiple" | "single" | Permite abrir uno o múltiples paneles simultáneamente. |
collapsible | boolean | false | Permite cerrar el panel activo al hacer clic de nuevo (solo type="single"). |
size | "sm" | "md" | "md" | Tamaño del accordion (padding y tipografía). |
value | string | string[] | — | Valor(es) del panel activo (controlled mode). |
onValueChange | (value: string | string[]) => void | — | Callback al cambiar el panel activo. |
className | string | — | Clases CSS adicionales. |
1{2 "name": "Accordion",3 "description": "Accordion para mostrar/ocultar contenido colapsable.",4 "component": "Accordion",5 "files": [6 "components/base/data-display/disclosure/Accordion.tsx"7 ],8 "dependencies": [9 "react",10 "@radix-ui/react-accordion",11 "lucide-react"12 ],13 "props": {14 "type": {15 "type": "'single' | 'multiple'",16 "description": "Type of accordion."17 },18 "collapsible": {19 "type": "boolean",20 "description": "Whether items can be collapsed."21 },22 "size": {23 "type": "'sm' | 'md'",24 "default": "md",25 "description": "Controls spacing and typography scale of the accordion."26 }27 }28}