Accordions
Usa el componente accordion para mostrar y ocultar secciones, organizar información relacionada y habilitar la revelación progresiva en tus docs.
Accordion permite a los usuarios expandir y contraer secciones de contenido. Usa Accordion para la revelación progresiva y para organizar la información.
Cuando abres un accordion, el hash de la URL se actualiza, lo que te permite compartir enlaces directos a secciones específicas del accordion.
<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>Agrupa acordeones relacionados usando <AccordionGroup>. Esto crea una sección coherente de acordeones que se pueden expandir o contraer individualmente.
<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>titlestringrequiredTítulo en la vista previa del Accordion.
descriptionstringDetalle debajo del título en la vista previa del Accordion.
defaultOpenbooleandefault: falseIndica si el Accordion se abre de forma predeterminada.
idstringUn ID personalizado para el Accordion usado para enlaces de anclaje. Si se omite, usa de forma predeterminada el mismo valor que title.
iconstringEl ícono que se mostrará.
Opciones:
- Nombre del ícono de Font Awesome, si tienes la propiedad
icons.libraryconfigurada comofontawesomeen tudocs.json - Nombre del ícono de Lucide, si tienes la propiedad
icons.libraryconfigurada comolucideen tudocs.json - Nombre del ícono de Tabler, si tienes la propiedad
icons.libraryconfigurada comotableren tudocs.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:
- Convierte tu SVG con el convertidor de SVGR.
- Pega tu código SVG en el campo de entrada de SVG.
- Copia el elemento completo
<svg>...</svg>del campo de salida de JSX. - Envuelve el código SVG compatible con JSX entre llaves:
icon={<svg ...> ... </svg>}. - Ajusta
heightywidthsegún sea necesario.
iconTypestringEl estilo de ícono de Font Awesome. Solo se usa con íconos de Font Awesome.
Opciones: regular, solid, light, thin, sharp-solid, duotone, brands.