Saltar al contenido principal
Accordion permite a los usuarios expandir y contraer secciones de contenido. Usa Accordion para la revelación progresiva y para organizar la información.

​
Accordion individual

Puedes poner cualquier contenido aquí, incluidos otros componentes, como código:
HelloWorld.java
 class HelloWorld {
     public static void main(String[] args) {
         System.out.println("Hello, World!");
     }
 }
Accordion example
<Accordion title="Soy un Accordion.">
  Puedes poner cualquier contenido aquí, incluyendo otros componentes, como código:

   ```java HelloWorld.java
    class HelloWorld {
        public static void main(String[] args) {
            System.out.println("¡Hola, Mundo!");
        }
    }
  ```
</Accordion>

​
Grupos de Accordion

Agrupa acordeones relacionados usando <AccordionGroup>. Esto crea una sección coherente de acordeones que se pueden expandir o contraer individualmente.
Puedes incluir otros componentes dentro de los Accordion.
HelloWorld.java
class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}
Añade iconos para que los acordeones sean más distintivos visualmente y fáciles de recorrer de un vistazo.
Mantén el contenido relacionado organizado en grupos.
Accordion Group Example
<AccordionGroup>
  <Accordion title="Primeros pasos">
    Puedes incluir otros componentes dentro de los Accordion.

    ```java HelloWorld.java
    class HelloWorld {
        public static void main(String[] args) {
            System.out.println("Hello, World!");
        }
    }
    ```
  </Accordion>

  <Accordion title="Funciones avanzadas" icon="alien-8bit">
    Añade iconos para hacer que los accordion sean más distintivos visualmente y fáciles de revisar.
  </Accordion>

  <Accordion title="Solución de problemas">
    Mantén el contenido relacionado organizado en grupos.
  </Accordion>
</AccordionGroup>

​
Propiedades

​
title
string
requerido
Título en la vista previa del Accordion.
​
description
string
Detalle debajo del título en la vista previa del Accordion.
​
defaultOpen
boolean
predeterminado:"false"
Indica si el Accordion se abre de forma predeterminada.
​
id
string
Un ID personalizado para el accordion utilizado para enlaces de anclaje. Si se omite, se utiliza el mismo valor que title.
​
icon
string
El ícono que se mostrará.Opciones:
  • Nombre del ícono de Font Awesome, si tienes la propiedad icons.library configurada como fontawesome en tu docs.json
  • Nombre del ícono de Lucide, si tienes la propiedad icons.library configurada como lucide en tu docs.json
  • Nombre del ícono de Tabler, si tienes la propiedad icons.library configurada como tabler en tu docs.json
  • URL de un ícono alojado externamente
  • Ruta a un archivo de ícono en tu proyecto
  • Código SVG envuelto entre llaves
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.
​
iconType
string
El estilo de ícono de Font Awesome. Solo se usa con íconos de Font Awesome.Opciones: regular, solid, light, thin, sharp-solid, duotone, brands.