Acordeones

Componentes desplegables para mostrar y ocultar contenido

Los acordeones permiten a los usuarios expandir y contraer secciones de contenido. Usa acordeones para la divulgación progresiva y para organizar la información.

Acordeón individual

Soy un acordeón.

Puedes incluir cualquier contenido aquí, incluso 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 acordeón.">
  Puedes incluir cualquier contenido aquí, incluso otros componentes, como código:

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

Grupos de acordeón

Agrupa acordeones relacionados con <AccordionGroup>. Esto crea una sección cohesionada de acordeones que pueden expandirse o contraerse individualmente.

Getting started

Puedes incluir otros componentes dentro de los acordeones.

HelloWorld.java

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

Advanced features

Añade iconos para que los acordeones sean más distintivos visualmente y fáciles de escanear.

Troubleshooting

Mantén el contenido relacionado organizado en grupos.

Accordion Group Example

<AccordionGroup>
  <Accordion title="Getting started">
    You can put other components inside Accordions.

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

  <Accordion title="Advanced features" icon="alien-8bit">
    Add icons to make accordions more visually distinct and scannable.
  </Accordion>

  <Accordion title="Troubleshooting">
    Keep related content organized into groups.
  </Accordion>
</AccordionGroup>

Propiedades

title · string · required

Título en la vista previa del acordeón.

description · string

Detalle debajo del título en la vista previa del acordeón.

defaultOpen · boolean · default: "false"

Indica si el acordeón está abierto de forma predeterminada.

icon · string

El icono que se mostrará.

Opciones:

• Nombre del icono de Font Awesome
• Nombre del icono de Lucide
• Código SVG compatible con JSX, envuelto entre llaves
• URL de un icono alojado externamente
• Ruta a un archivo de icono en tu proyecto

Para iconos SVG personalizados:

1. Convierte tu SVG con el convertidor 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 del icono de Font Awesome. Solo se usa con iconos de Font Awesome.

Opciones: regular, solid, light, thin, sharp-solid, duotone, brands.