Accordion
Secciones de contenido contraíbles que permiten a los usuarios expandir solo lo que necesitan. Ideal para preguntas frecuentes, listas de características y opciones de configuración.
Secciones contraíbles -- los lectores ven el encabezado y expanden para ver los detalles. Admite iconos, descripciones y agrupación.
Usa Accordions cuando:
- Preguntas frecuentes - Los usuarios escanean las preguntas y expanden las respuestas
- Listas de características - Cada característica tiene una sección con detalles
- Opciones de configuración - Agrupa la configuración por categoría
- Guías paso a paso con detalles expandibles
Uso
<Accordion title="Advanced Configuration">
Optional details go here.
</Accordion>Accordion básico
Este contenido está oculto hasta que se expande el accordion.
Puedes incluir cualquier contenido aquí: texto, código, imágenes u otros componentes.
<Accordion title="Click to expand">
This content is hidden until the accordion is expanded.
You can include any content here: text, code, images, or other components.
</Accordion>Con descripción
Agrega un subtítulo con la prop description:
Aquí va la documentación para los endpoints de autenticación de la API.
<Accordion title="API Reference" description="Authentication endpoints">
Documentation for authentication API endpoints goes here.
</Accordion>Abierto por defecto
Comienza expandido con defaultOpen:
Este accordion comienza en estado abierto.
<Accordion title="Already Expanded" defaultOpen>
This accordion starts in the open state.
</Accordion>Con icono
Opciones de configuración y ajustes.
<Accordion title="Settings" icon="gear">
Configuration options and settings.
</Accordion>Accordion vs Expandable
| Característica | Accordion | Expandable |
|---|---|---|
| Iconos | Sí | No |
| Descripciones | Sí (subtítulo) | No |
| Agrupación | AccordionGroup | Independiente |
| Peso visual | Mayor, tipo sección | Menor, en línea |
| Ideal para | Preguntas frecuentes, listas de características | Contenido complementario |
Regla general: Usa Accordion cuando las secciones son igualmente importantes y los usuarios eligen entre ellas. Usa Expandable para detalles "que está bien tener" que no necesitan prominencia visual.
Props
Texto del encabezado del accordion.
Subtítulo que se muestra debajo del título.
Nombre del icono de Font Awesome (p. ej., "gear", "settings").
Variante de estilo del icono: light, regular o solid.
Comienza en estado expandido.