Skip to main content
Los acordeones permiten a los usuarios expandir y contraer secciones de contenido. Utiliza acordeones para la revelación progresiva y para organizar la información.

Acordeón individual

Puedes poner cualquier contenido aquí, incluidos otros componentes, como código:
HelloWorld.java
Ejemplo de acordeón

Grupos de acordeones

Agrupa acordeones relacionados usando <AccordionGroup>. Esto crea una sección coherente de acordeones que se pueden expandir o contraer individualmente.
Puedes colocar otros componentes dentro de los acordeones.
HelloWorld.java
Agrega íconos para que los acordeones sean más distintivos visualmente y fáciles de explorar.
Mantén el contenido relacionado organizado en grupos.
Ejemplo de grupo de acordeones

Propiedades

string
requerido
Título en la vista previa del acordeón.
string
Detalle debajo del título en la vista previa del acordeón.
boolean
predeterminado:"false"
Si el acordeón se abre de forma predeterminada.
string
El ícono que se mostrará.Opciones:
  • nombre del ícono de Font Awesome
  • nombre del ícono de Lucide
  • Código SVG compatible con JSX envuelto entre llaves
  • URL a un ícono alojado externamente
  • Ruta a un archivo de ícono en tu proyecto
Para íconos SVG personalizados:
  1. Convierte tu SVG con el convertidor de SVGR.
  2. Pega tu código SVG en el campo de entrada de SVG.
  3. Copia el elemento completo <svg>...</svg> del campo de salida de JSX.
  4. Envuelve el código SVG compatible con JSX entre llaves: icon={<svg ...> ... </svg>}.
  5. Ajusta height y width según sea necesario.
string
El estilo del ícono de Font Awesome. Solo se usa con íconos de Font Awesome.Opciones: regular, solid, light, thin, sharp-solid, duotone, brands.