Saltar al contenido principal
Version: 4.5.0

Accordion

Un acordeón es un componente de diseño que permite organizar el contenido en diferentes secciones que pueden ser colapsadas o ampliadas. Dentro de sus paneles, permite tener el mismo contenido que una ventana o un elemento de etiqueta, incluso otros acordeones anidados.

Accordion

Esqueleto de XML

<accordion id="[accordion-identifier]" ...>
<accordion-item... />
<dependency... />
</accordion>

Estructura de acordeón

<accordion id="[accordion-identifier]" selected="[id-selected]" autocollapse="[accordion-autocollapse]" style="[accordion-style]">
...
</accordion>

Atributos de acordeón

AtributoUsoTipoDescripciónValores
idObligatorioStringIdentificador del acordeón. Con fines de referencia
autocollapseOpcionalStringSi se establece en "true" solo un panel del acordeón puede permanecer abierto a la veztrue o false (por defecto es true)
selectedOpcionalStringSi queremos que un elemento del acordeón esté abierto al principio, establezca su ID aquí
styleOpcionalStringClases CSS de GridPodemos usar clases de panel-group-[type] y panel-group-dark para definir el estilo (type puede ser uno de los valores danger, success, etc)

Estructura de paneles de acordeón

<accordion-item id="[accordion-item-identifier]" label="[accordion-item-label]" 
style="[accordion-item-style]">
...
</accordion-item>

Atributos de paneles de acordeón

AtributoUsoTipoDescripciónValores
idObligatorioStringIdentificador del panel del acordeón. Con fines de referencia
labelObligatorioStringTexto a colocar dentro de la cabecera del panelNota: Puedes usar i18n archivos (locales)
styleOpcionalStringClases CSS de Grid

Dependencies

Si queremos colapsar o expandir un elemento de acordeón usando una dependencia, debemos usar una que modifique el atributo selected estableciendo el ID del elemento (si está expandido se cerrará y viceversa)

<dependency target-type="attribute" target-action="selected" value="[child-id]">
...
</dependency>

Ejemplos

A continuación podemos ver la diferencia entre tener el atributo autocollapse como true (izquierda) o false (derecha)

Ejemplo de acordeón 1

Lo siguiente es un panel de acordeón que contiene una ventana con un include

Ejemplo de acordeón 2

Y esto sería un ejemplo completo de estructura de acordeón

<accordion id="acc2" autocollapse="false" style="panel-group-info">
<accordion-item id="acc2-1" label="Item 1">
<tag>
<text>
"Lorem ipsum ... laborum."
</text>
</tag>
</accordion-item>
<accordion-item id="acc2-2" label="Item 2">
<tag>
<text>
"Sed ut ... pariatur?"
</text>
</tag>
</accordion-item>
<accordion-item id="acc2-3" label="Item 3">
<tag>
<text>
"At vero ... repellat."
</text>
</tag>
</accordion-item>
</accordion>