DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Acordeón

Mostrar y ocultar

Se trata de un listado de elementos organizados verticalmente que permite mostrar y ocultar el contenido de dichos elementos. En general se usan para agrupar información que se consume por bloques, como preguntas frecuentes, detalles de un elemento, fases de un proceso, etc.

Accordion

Por defecto

Si abres uno, se cierran el resto. Una vez que abres un item, se mantiene al menos un item abierto. Asume que allowmultiple: false y allowToggle: false aunque no se defina expresamente.

Descripción visual

Componente acordeón con tres ítems dentro de un contenedor con borde gris claro. Cada ítem muestra un texto de encabezado en gris oscuro alineado a la izquierda y un enlace en gris claro alineado a la derecha. El título del componente aparece en gris oscuro encima del contenedor.

Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro
{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}
{{ componentAccordion({
  "idPrefix": "accordion-example",
  "headingLevel": 3,
  "items": [
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    }
  ]
}) }}

Permite múltiples

Permite tener abiertos varios items a la vez sin cerrar automáticamente ninguno. Define allowmultiple: true y asume que allowToggle: true.

Descripción visual

Componente acordeón con tres ítems dentro de un contenedor con borde gris claro. Cada ítem muestra un texto de encabezado en gris oscuro alineado a la izquierda y un enlace en gris claro alineado a la derecha. El título del componente aparece en gris oscuro encima del contenedor.

Mostrar códigodel ejemplo: Permite múltiples

Contenido

Nunjucks macro
{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}
{{ componentAccordion({
  "idPrefix": "allowmultiple-example",
  "headingLevel": 3,
  "allowMultiple": true,
  "items": [
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    }
  ]
}) }}

Permite cerrar

Si abres uno, se cierran el resto. Permite que cierres el que está abierto para que queden todos cerrados. Define allowToggle: true y asume que allowMultiple: false.

Descripción visual

Componente acordeón con tres ítems dentro de un contenedor con borde gris claro. Cada ítem muestra un texto de encabezado en gris oscuro alineado a la izquierda y un enlace en gris claro alineado a la derecha. El título del componente aparece en gris oscuro encima del contenedor.

Mostrar códigodel ejemplo: Permite cerrar

Contenido

Nunjucks macro
{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}
{{ componentAccordion({
  "idPrefix": "allowtoggle-example",
  "headingLevel": 3,
  "allowToggle": true,
  "items": [
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    }
  ]
}) }}

Con un item abierto

Podemos abrir inicialmente un item si le añadimos el parámetro 'open': true. También puedes usar con javascript la función global activateItemAccordion(elementMenu, activeItemId) para abrir un item, usando sus ids. Ej: Abre la consola del navegador y escribe activateItemAccordion('accordion', 'with-one-item-opened-example-1-title') para cerrar el item actual y abrir el primer item de este ejemplo.

Descripción visual

Acordeón con borde gris claro, fondo blanco. Incluye tres ítems apilados verticalmente con títulos en texto negro regular y enlaces alineados a la derecha en azul. El segundo ítem muestra contenido expandido con área de texto visible en fondo blanco.

Mostrar códigodel ejemplo: Con un item abierto

Contenido

Nunjucks macro
{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}
{{ componentAccordion({
  "idPrefix": "with-one-item-opened-example",
  "headingLevel": 3,
  "allowToggle": true,
  "items": [
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
      "open": true
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    }
  ],
  "attributes": {
    "id": "accordion"
  }
}) }}

Con 2 items abiertos

Podemos abrir inicialmente items si les añadimos el parámetro 'open': true. También puedes usar con javascript la función global activateItemAccordion(elementMenu, activeItemsIds) para abrir varios items, usando sus ids. Ej: Abre la consola del navegador y escribe activateItemAccordion('accordion-multiple', ['with-2-items-opened-example-2-title', 'with-2-items-opened-example-3-title']).

Descripción visual

Acordeón con borde gris claro, fondo blanco. Contiene tres ítems apilados verticalmente con títulos en texto negro regular y enlaces alineados a la derecha en azul. Los ítems primero y tercero muestran áreas de contenido expandidas con fondo blanco visible.

Mostrar códigodel ejemplo: Con 2 items abiertos

Contenido

Nunjucks macro
{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}
{{ componentAccordion({
  "idPrefix": "with-2-items-opened-example",
  "headingLevel": 3,
  "allowMultiple": true,
  "items": [
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
      "open": true
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
      "open": true
    }
  ],
  "attributes": {
    "id": "accordion-multiple"
  }
}) }}

Deshabilitados con allowtoggle y allowmultiple

Ocultará la infomación de mostrar/ocultar y deshabilitará el item para no poder ser clicado. Usando el parámetro 'disabled': true.

Descripción visual

Acordeón con borde gris claro, fondo blanco. Presenta tres ítems apilados verticalmente con títulos en texto negro regular y enlace alineado a la derecha en azul. El tercer ítem muestra contenido expandido con área de texto en fondo blanco, mientras los dos primeros permanecen colapsados.

Mostrar códigodel ejemplo: Deshabilitados con allowtoggle y allowmultiple

Contenido

Nunjucks macro
{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}
{{ componentAccordion({
  "idPrefix": "accordion-disabled",
  "headingLevel": 3,
  "allowToggle": true,
  "allowMultiple": true,
  "items": [
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón no deshabilitado</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón deshabilitado</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
      "disabled": true
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón deshabilitado y abierto</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
      "disabled": true,
      "open": true
    }
  ]
}) }}

Con encabezado

Usa el parámetro 'heading' para añadir un encabezado asociado al componente. Usa el parámetro 'headingLevel' para establecer el nivel del encabezado. Por ejemplo: 'headingLevel': 3 creará un encabezado <h3>.

Descripción visual

Acordeón con título en negrita oscuro tamaño grande, contenedor con borde gris claro de 1px y esquinas redondeadas. Tres ítems listados verticalmente con labels en negro peso normal y enlaces alineados a la derecha en color azul.

Encabezado de acordeón

Mostrar códigodel ejemplo: Con encabezado

Contenido

Nunjucks macro
{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}
{{ componentAccordion({
  "idPrefix": "heading-example",
  "headingLevel": 3,
  "heading": {
    "text": "Encabezado de acordeón"
  },
  "items": [
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    }
  ]
}) }}

Con encabezado de nivel 4

Usa el parámetro 'heading' para añadir un encabezado asociado al componente. Usa el parámetro 'headingLevel' para establecer el nivel del encabezado. En este ejemplo: 'headingLevel': 4 creará un encabezado de componente <h4> y los botones interiores tendrán los siguientes niveles de encabezado para conservar la jerarquía de encabezados correspondiente: en este caso <h5>.

Descripción visual

Acordeón con título principal en negrita tamaño medio-grande, subtítulo secundario en negrita negro debajo, contenedor con borde gris de 1px. Tres ítems con texto descriptivo incluyendo etiquetas HTML `<ol>` y `<li>` en negro, enlaces azules alineados a la derecha.

Este encabezado con <h4>

Mostrar códigodel ejemplo: Con encabezado de nivel 4

Contenido

Nunjucks macro
{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}
{{ componentAccordion({
  "idPrefix": "accordion-heading-level-example",
  "headingLevel": 4,
  "heading": {
    "text": "Este encabezado con <h4>"
  },
  "items": [
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Este Item 1 con &lt;h5&gt;</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Este Item 2 con &lt;h5&gt;</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Este Item 3 con &lt;h5&gt;</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    }
  ]
}) }}

Con encabezado y controles de mostrar todo

Usa el parámetro 'showControl': true para mostrar un controlador que permite mostrar/ocultar todos los items de una vez.

Descripción visual

Acordeón con título en negrita negro, enlace azul alineado a la derecha en la cabecera, contenedor con borde gris de 1px. Tres ítems donde el primero tiene enlace azul, el segundo muestra contenedor expandido con borde punteado gris y enlace azul, el tercero tiene enlace azul.

Encabezado de acordeón

Mostrar códigodel ejemplo: Con encabezado y controles de mostrar todo

Contenido

Nunjucks macro
{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}
{{ componentAccordion({
  "idPrefix": "heading-and-show-controls-example",
  "headingLevel": 3,
  "heading": {
    "text": "Encabezado de acordeón"
  },
  "showControl": true,
  "allowMultiple": true,
  "items": [
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
      "open": true
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    }
  ]
}) }}

Mostrar todo u ocultar todo con javascript

Es necesario usar el parámetro 'showControl': true. Puedes usar con javascript la función global activateAllAccordion(element, show), para mostrar u ocultar todos los items, usando el idPrefix del acordeón, el parámetro show admite true o false, si le pasamos true se mostrarán todos los items expandidos, y si le pasamos false se mostrarán cerrados. Ej: Abre la consola del navegador y escribe activateAllAccordion('show-all-accordion-example-js', true) para mostrar todos los items expandidos.

Descripción visual

Accordion con encabezado de sección que incluye un enlace alineado a la derecha. Cada ítem presenta un título en texto negro con enlace en gris a la derecha. Bordes grises claros separan los ítems, con fondo blanco en toda la sección.

Encabezado de acordeón

Mostrar códigodel ejemplo: Mostrar todo u ocultar todo con javascript

Contenido

Nunjucks macro
{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}
{{ componentAccordion({
  "idPrefix": "show-all-accordion-example-js",
  "headingLevel": 3,
  "heading": {
    "text": "Encabezado de acordeón"
  },
  "showControl": true,
  "allowMultiple": true,
  "items": [
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
      "open": true
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    }
  ]
}) }}

Con controles personalizados para mostrar/ocultar

Usa los parámetros 'show' y 'hide' para personalizar los controles que permiten abrir cada item. El último item de este ejemplo no muestra ningún controlador visible.

Descripción visual

Accordion con encabezado de sección en texto negro. Cada ítem muestra un título en texto negro con icono alineado a la derecha en color gris. Bordes grises finos delimitan cada fila, con fondo blanco uniforme en toda el área.

Mostrar códigodel ejemplo: Con controles personalizados para mostrar/ocultar

Contenido

Nunjucks macro
{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}
{{ componentAccordion({
  "idPrefix": "accordion-show-hide",
  "headingLevel": 3,
  "allowMultiple": true,
  "items": [
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
      "show": {
        "text": "Expandir detalles"
      },
      "hide": {
        "text": "Contraer"
      }
    },
    {
      "headerHtml": "<span class='block pr-lg pointer-events-none'>Item de acordeón 2</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
      "show": {
        "html": "<svg class='w-4 h-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M14 7a1 1 0 0 0-1-1H8.25A.25.25 0 0 1 8 5.75V1a1 1 0 0 0-2 0v4.75a.25.25 0 0 1-.25.25H1a1 1 0 0 0 0 2h4.75a.25.25 0 0 1 .25.25V13a1 1 0 0 0 2 0V8.25A.25.25 0 0 1 8.25 8H13a1 1 0 0 0 1-1Z' fill='currentColor' transform='scale(3.42857)'/></svg>"
      },
      "hide": {
        "html": "<svg class='w-4 h-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M13 8H1a1 1 0 0 1 0-2h12a1 1 0 0 1 0 2Z' fill='currentColor' transform='scale(3.42857)'/></svg>"
      }
    },
    {
      "headerHtml": "<span class='block pr-lg pointer-events-none'>Item de acordeón 3</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
      "show": {
        "html": "<span class='c-link'>\n              <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' viewBox='-0.5 -0.5 16 16' xml:space='preserve' height='1.25em' width='1.25em'><path d='M7.5 12.1875c-0.4375 0 -0.8125 -0.1875 -1.0625 -0.5L0.25 4.75c-0.375 -0.5 -0.3125 -1.25 0.1875 -1.625 0.5 -0.375 1.1875 -0.375 1.5625 0.125l5.375 6.125c0.0625 0.0625 0.125 0.0625 0.25 0l5.375 -6.125c0.4375 -0.5 1.125 -0.5625 1.625 -0.125s0.5625 1.125 0.125 1.625l-0.0625 0.0625 -6.125 6.9375c-0.25 0.25 -0.6875 0.4375 -1.0625 0.4375z' fill='currentColor' stroke-width='1'></path></svg>\n            </span>"
      },
      "hide": {
        "html": "<span class='c-link'>\n              <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' viewBox='-0.5 -0.5 16 16' xml:space='preserve' height='1.25em' width='1.25em'><path d='M7.5625 2.8125c0.4375 0 0.8125 0.1875 1.0625 0.5l6.0625 6.875c0.4375 0.4375 0.375 1.1875 -0.0625 1.625s-1.1875 0.375 -1.625 -0.0625l-0.0625 -0.0625 -5.3125 -6c-0.0625 -0.0625 -0.125 -0.0625 -0.25 0l-5.3125 6c-0.4375 0.5 -1.125 0.5625 -1.625 0.125s-0.5625 -1.125 -0.125 -1.625l0.0625 -0.0625 6.0625 -6.875c0.3125 -0.25 0.6875 -0.4375 1.125 -0.4375z' fill='currentColor' stroke-width='1'></path></svg></span>"
      }
    },
    {
      "headerHtml": "Item de acordeón 4",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
      "show": {
        "text": ""
      },
      "hide": {
        "text": ""
      }
    }
  ]
}) }}

Con html en las cabeceras de los items

Podemos añadir texto adicional bajo las cabeceras de los items. Para evitar problemas de eventos el el click, usamos la clase pointer-events-none en los subelementos.

Descripción visual

Accordion con encabezado de sección en texto negro. Cada ítem contiene un título en negro seguido de subtexto en gris claro debajo, con enlace alineado a la derecha. Bordes grises claros separan los ítems, fondo blanco en toda la zona.

Mostrar códigodel ejemplo: Con html en las cabeceras de los items

Contenido

Nunjucks macro
{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}
{{ componentAccordion({
  "idPrefix": "accordion-example-pointer-events-none",
  "headingLevel": 3,
  "items": [
    {
      "headerHtml": "<span class='block pointer-events-none'>Item de acordeón 1</span><span class='block pointer-events-none font-normal'>El subelemento también recibe eventos</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pointer-events-none'>Item de acordeón 2</span><span class='block pointer-events-none font-normal'>El subelemento también recibe eventos</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pointer-events-none'>Item de acordeón 3</span><span class='block pointer-events-none font-normal'>El subelemento también recibe eventos</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    }
  ]
}) }}

Con clases de css aplicadas

Los parámetros classes nos permiten aplicar clases de Tailwind CSS a nuestro componente.

Descripción visual

Acordeón con borde gris claro, conteniendo tres ítems. Cada ítem muestra un label negro a la izquierda y un botón de acción alineado a la derecha. El segundo ítem está expandido, revelando un panel con fondo azul claro que contiene un rectángulo punteado en la esquina superior izquierda.

Accordion example

Mostrar códigodel ejemplo: Con clases de css aplicadas

Contenido

Nunjucks macro
{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}
{{ componentAccordion({
  "idPrefix": "classes-example",
  "headingLevel": 3,
  "classes": "px-lg pt-base border-t border-b border-neutral-base",
  "heading": {
    "text": "Accordion example",
    "classes": "c-h2 mb-lg uppercase"
  },
  "items": [
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-white rounded-lg h-40'></div></div>",
      "classes": "p-sm bg-primary-light",
      "open": true
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
    }
  ]
}) }}

Con atributos aplicados

Los parámetros attributes nos permiten aplicar atributos de HTML a nuestro componente, como por ejemplo id o etiquetas ARIA como aria-label. Mira el código para ver los atributos aplicados.

Descripción visual

Acordeón con borde gris claro, conteniendo tres ítems colapsados. Cada ítem muestra un label negro a la izquierda y un enlace gris alineado a la derecha. Los ítems están separados por líneas divisorias horizontales grises. Fondo blanco en toda la estructura del componente.

Mostrar códigodel ejemplo: Con atributos aplicados

Contenido

Nunjucks macro
{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}
{{ componentAccordion({
  "idPrefix": "attributes-example",
  "headingLevel": 3,
  "attributes": {
    "id": "accordion-test"
  },
  "items": [
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
      "attributes": {
        "data-attr": "accordion-item-test-a"
      }
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
      "attributes": {
        "data-attr": "accordion-item-test-b"
      }
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
      "attributes": {
        "data-attr": "accordion-item-test-c"
      }
    }
  ]
}) }}