mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
mintlify[bot]
4b465465dd
Generated-By: mintlify-agent Co-authored-by: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com>
117 lines
3.5 KiB
Plaintext
117 lines
3.5 KiB
Plaintext
---
|
|
title: "Accordions"
|
|
description: "Usa el componente de accordion para mostrar y ocultar secciones de contenido, organizar información relacionada y habilitar la revelación progresiva en tus documentos."
|
|
keywords: ["accordions", "collapsible content", "expandable sections", "progressive disclosure"]
|
|
boost: 3
|
|
---
|
|
|
|
import IconsOptional from "/snippets/es/icons-optional.mdx";
|
|
|
|
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.
|
|
|
|
<div id="single-accordion">
|
|
## Accordion individual
|
|
</div>
|
|
|
|
<Accordion title="Soy un Accordion.">
|
|
Puedes poner cualquier contenido aquí, incluidos otros componentes, como código:
|
|
|
|
```java HelloWorld.java
|
|
class HelloWorld {
|
|
public static void main(String[] args) {
|
|
System.out.println("Hello, World!");
|
|
}
|
|
}
|
|
```
|
|
</Accordion>
|
|
|
|
````mdx 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>
|
|
````
|
|
|
|
<div id="accordion-groups">
|
|
## Grupos de Accordion
|
|
</div>
|
|
|
|
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="bot">
|
|
Añade iconos para que los acordeones sean más distintivos visualmente y fáciles de recorrer de un vistazo.
|
|
</Accordion>
|
|
|
|
<Accordion title="Solución de problemas">
|
|
Mantén el contenido relacionado organizado en grupos.
|
|
</Accordion>
|
|
</AccordionGroup>
|
|
|
|
````mdx 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>
|
|
````
|
|
|
|
|
|
<div id="properties">
|
|
## Propiedades
|
|
</div>
|
|
|
|
<ResponseField name="title" type="string" required>
|
|
Título en la vista previa del Accordion.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="description" type="string">
|
|
Detalle debajo del título en la vista previa del Accordion.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="defaultOpen" type="boolean" default="false">
|
|
Indica si el Accordion se abre de forma predeterminada.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="id" type="string">
|
|
Un ID personalizado para el Accordion usado para enlaces de anclaje. Si se omite, usa de forma predeterminada el mismo valor que `title`.
|
|
</ResponseField>
|
|
|
|
<IconsOptional /> |