DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Acordeón histórico

Mostrar y ocultar

La diferencia entre el acordeón histórico y el acordeón reside en que en este primero, la información que se presenta tiene un orden cronológico y habitualmente está referido a pasos que debe realizar el usuario. Al igual que en el caso del acordeón, puede haber varios elementos desplegados.

Accordion-history

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

Lista de tres ítems de acordeón con fondo blanco. Cada ítem muestra un indicador circular azul a la izquierda, texto de label en negro a tamaño estándar, y link en gris a la derecha. Separadores de línea gris claro entre ítems.

Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro
{% from "components/accordion-history/_macro.accordion-history.njk" import componentAccordionHistory %}
{{ componentAccordionHistory({
  "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>"
    }
  ]
}) }}

Con estado

Usa el parámetro 'status': past/current/pending para establecer su apariencia de estado pasado, actual, pendiente. Usa el parámetro 'status': muted/currentmuted para establecer su apariencia de estado muteado, actual muteado, que lo utilizamos para eventos sobre los que ya no se puede actuar.

Descripción visual

Lista de cinco ítems de acordeón con fondo blanco mostrando diferentes estados visuales. Indicadores de estado variados: círculo gris relleno, círculo gris vacío, círculo azul relleno, círculo vacío con borde negro, círculo vacío con borde gris. Cada ítem tiene texto de label en negro y link alineado a la derecha, con separadores grises entre ítems.

Mostrar códigodel ejemplo: Con estado

Contenido

Nunjucks macro
{% from "components/accordion-history/_macro.accordion-history.njk" import componentAccordionHistory %}
{{ componentAccordionHistory({
  "idPrefix": "accordion-status",
  "headingLevel": 3,
  "items": [
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón muteado</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
      "status": "muted"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón actual muteado</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
      "status": "currentmuted"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón pasado</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
      "status": "past"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón actual</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
      "status": "current"
    },
    {
      "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón pendiente</span>",
      "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
      "status": "pending"
    }
  ]
}) }}

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

Lista de tres ítems de acordeón con fondo blanco. Indicadores circulares azules a la izquierda de cada ítem, texto de label en negro tamaño estándar, y link "Mostrar" en gris posicionado a la derecha. Líneas separadoras grises horizontales dividen cada ítem.

Mostrar códigodel ejemplo: Permite múltiples

Contenido

Nunjucks macro
{% from "components/accordion-history/_macro.accordion-history.njk" import componentAccordionHistory %}
{{ componentAccordionHistory({
  "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

Panel con borde gris claro de 1px y fondo blanco. Contiene 3 ítems verticales con labels en texto negro normal y enlaces en gris claro alineados a la derecha. Línea vertical azul conecta los ítems en el margen izquierdo con puntos azules circulares.

Mostrar códigodel ejemplo: Permite cerrar

Contenido

Nunjucks macro
{% from "components/accordion-history/_macro.accordion-history.njk" import componentAccordionHistory %}
{{ componentAccordionHistory({
  "idPrefix": "allowtoggle-example",
  "headingLevel": 3,
  "allowToggle": true,
  "showControl": false,
  "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-history', 'with-one-item-opened-example-1-title') para cerrar el item actual y abrir el primer item de este ejemplo.

Descripción visual

Panel con borde gris claro de 1px y fondo blanco. Muestra 3 ítems verticales con labels en texto negro normal, el ítem del medio expandido con área de contenido vacía en fondo gris claro. Enlaces en gris claro alineados a la derecha, línea vertical azul con puntos circulares azules conecta los ítems.

Mostrar códigodel ejemplo: Con un item abierto

Contenido

Nunjucks macro
{% from "components/accordion-history/_macro.accordion-history.njk" import componentAccordionHistory %}
{{ componentAccordionHistory({
  "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-history"
  }
}) }}

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-history-multiple', ['with-2-items-opened-example-2-title', 'with-2-items-opened-example-3-title']).

Descripción visual

Panel con borde gris claro de 1px y fondo blanco. Presenta 3 ítems verticales con labels en texto negro normal, el primer y tercer ítem expandidos mostrando áreas de contenido vacías con fondo gris claro. Enlaces en gris claro alineados a la derecha, línea vertical azul con puntos circulares azules conecta los ítems en el margen izquierdo.

Mostrar códigodel ejemplo: Con 2 items abiertos

Contenido

Nunjucks macro
{% from "components/accordion-history/_macro.accordion-history.njk" import componentAccordionHistory %}
{{ componentAccordionHistory({
  "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-history-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

Tres ítems de acordeón con indicadores circulares azul oscuro a la izquierda, texto de títulos en negro tamaño estándar, y enlace alineado a la derecha en gris. Fondo blanco con líneas divisorias sutiles entre ítems, sin áreas de contenido expandidas visibles.

Mostrar códigodel ejemplo: Deshabilitados con allowtoggle y allowmultiple

Contenido

Nunjucks macro
{% from "components/accordion-history/_macro.accordion-history.njk" import componentAccordionHistory %}
{{ componentAccordionHistory({
  "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

Encabezado en texto negro negrita arriba del componente. Tres ítems de acordeón con indicadores circulares azul oscuro a la izquierda, títulos en texto negro tamaño estándar, y enlaces en gris alineados a la derecha. Fondo blanco contenido en borde gris claro con separadores horizontales entre ítems.

Encabezado de acordeón

Mostrar códigodel ejemplo: Con encabezado

Contenido

Nunjucks macro
{% from "components/accordion-history/_macro.accordion-history.njk" import componentAccordionHistory %}
{{ componentAccordionHistory({
  "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

Título en texto negro negrita ubicado sobre el componente. Tres ítems de acordeón con indicadores circulares azul oscuro a la izquierda, títulos en texto negro que incluyen etiquetas HTML visibles como código, y enlaces en gris alineados a la derecha. Fondo blanco con borde gris claro perimetral y líneas divisorias horizontales grises entre elementos.

Este encabezado con h4

Mostrar códigodel ejemplo: Con encabezado de nivel 4

Contenido

Nunjucks macro
{% from "components/accordion-history/_macro.accordion-history.njk" import componentAccordionHistory %}
{{ componentAccordionHistory({
  "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 borde gris claro, encabezado en texto negro negrita, y enlace alineado a la derecha en azul subrayado. Tres ítems listados verticalmente con texto negro, cada uno con enlace en azul a la derecha. Línea vertical azul conecta los ítems del lado izquierdo con círculos azules como marcadores.

Encabezado de acordeón

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

Contenido

Nunjucks macro
{% from "components/accordion-history/_macro.accordion-history.njk" import componentAccordionHistory %}
{{ componentAccordionHistory({
  "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 id del botó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-history-js', true) para mostrar todos los items expandidos.

Descripción visual

Acordeón con borde gris claro, encabezado en texto negro negrita, y enlace alineado a la derecha en azul subrayado. Tres ítems con texto negro dispuestos verticalmente, cada uno con enlace en azul a la derecha. Línea vertical azul en el margen izquierdo conecta los ítems mediante círculos azules rellenos.

Encabezado de acordeón

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

Contenido

Nunjucks macro
{% from "components/accordion-history/_macro.accordion-history.njk" import componentAccordionHistory %}
{{ componentAccordionHistory({
  "idPrefix": "show-all-accordion-example-history-js",
  "id": "show-all-accordion-history-button-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

Acordeón con borde gris claro conteniendo cuatro ítems listados verticalmente con texto negro. Primer ítem muestra enlace en azul a la derecha, segundo y cuarto ítem tienen ícono gris, tercer ítem tiene ícono chevron hacia abajo. Línea vertical azul en el borde izquierdo conecta todos los ítems mediante círculos azules.

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

Contenido

Nunjucks macro
{% from "components/accordion-history/_macro.accordion-history.njk" import componentAccordionHistory %}
{{ componentAccordionHistory({
  "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

Lista vertical de tres ítems expandibles con borde izquierdo azul de 3px. Cada ítem tiene un título en texto negro mediano negrita, subtexto gris claro, y enlace gris alineado a la derecha. Fondo blanco con separadores horizontales grises tenues entre ítems.

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

Contenido

Nunjucks macro
{% from "components/accordion-history/_macro.accordion-history.njk" import componentAccordionHistory %}
{{ componentAccordionHistory({
  "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

Lista vertical de tres ítems con borde izquierdo azul de 3px y fondo que alterna entre blanco y celeste claro. El segundo ítem contiene un área expandida celeste claro con un recuadro punteado blanco. Cada ítem muestra texto negro mediano con enlaces alineados a la derecha en gris.

Mostrar códigodel ejemplo: Con clases de css aplicadas

Contenido

Nunjucks macro
{% from "components/accordion-history/_macro.accordion-history.njk" import componentAccordionHistory %}
{{ componentAccordionHistory({
  "idPrefix": "classes-example",
  "headingLevel": 3,
  "classes": "px-lg pt-base border-t border-b border-neutral-base",
  "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

Lista vertical de tres ítems expandibles con borde izquierdo azul de 3px sobre fondo blanco. Cada ítem presenta texto negro mediano en una sola línea con enlace gris alineado a la derecha. Separadores horizontales grises tenues dividen los ítems con espaciado uniforme vertical.

Mostrar códigodel ejemplo: Con atributos aplicados

Contenido

Nunjucks macro
{% from "components/accordion-history/_macro.accordion-history.njk" import componentAccordionHistory %}
{{ componentAccordionHistory({
  "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"
      }
    }
  ]
}) }}