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.

Collapsible

Parámetros Nunjucks del componente: "Collapsible". Versión: 4.0.0

Los parámetros de Nunjucks para este componente están dentro de la siguiente etiqueta code en formato yaml.

        {"val":"params:\n- name: headerText\n  type: string\n  required: true\n  description: If `headerHtml` is set, this is not required. Text to use within the header element (the visible part of the collapsible element). If `headerHtml` is provided, the `headerText` argument will be ignored.\n- name: headerHtml\n  type: string\n  required: true\n  description: If `headerText` is set, this is not required. HTML to use within the header element (the visible part of the collapsible element). If `headerHtml` is provided, the `headerText` argument will be ignored.\n- name: text\n  type: string\n  required: true\n  description: If `html` is set, this is not required. Text to use within the disclosed part of the collapsible element. If `html` is provided, the `text` argument will be ignored.\n- name: html\n  type: string\n  required: true\n  description: If `text` is set, this is not required. HTML to use within the disclosed part of the collapsible element. If `html` is provided, the `text` argument will be ignored.\n- name: id\n  type: string\n  required: false\n  description: Id to add to the collapsible element. Not required, but recommended to improve the accessibility.\n- name: open\n  type: boolean\n  required: false\n  description: If true, collapsible element will be expanded.\n- name: buttonClasses\n  type: string\n  required: false\n  description: Classes to add to the button element.\n- name: showClasses\n  type: string\n  required: false\n  description: Classes to add to the show element.\n- name: hideClasses\n  type: string\n  required: false\n  description: Classes to add to the hide element.\n- name: contentClasses\n  type: string\n  required: false\n  description: Classes to add to the content element.\n- name: classes\n  type: string\n  required: false\n  description: Classes to add to the collapsible container element.\n- name: attributes\n  type: object\n  required: false\n  description: HTML attributes (for example data attributes) to add to the collapsible container element.","length":1964}

Por defecto

Ejemplo: "Por defecto", de código HTML, para maquetar el componente: "Collapsible", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- collapsible -->
<div class="-my-px py-sm border-t border-b border-neutral-base c-collapsible" data-expanded="true" data-module="c-collapsible">
  <button aria-expanded="false" id="collapsible-default-title" class="group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" aria-controls="collapsible-default">Cabecera del collapsible
    <span class="c-collapsible__show absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="false">Mostrar</span>
    <span class="c-collapsible__hide absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">Ocultar</span>
  </button>
  <div aria-hidden="true" class="c-collapsible__content py-sm" id="collapsible-default">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</div>
<!-- /collapsible -->

Ejemplo: "Por defecto", de código Nunjucks, para maquetar el componente: "Collapsible", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/collapsible/_macro.collapsible.njk" import componentCollapsible %}

{{ componentCollapsible({
  "id": "collapsible-default",
  "headerText": "Cabecera del collapsible",
  "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\n      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\n      proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}) }}
Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro
{% from "components/collapsible/_macro.collapsible.njk" import componentCollapsible %}

{{ componentCollapsible({
  "id": "collapsible-default",
  "headerText": "Cabecera del collapsible",
  "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\n      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\n      proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}) }}

Expandido

Añade open: true a un item para mostrarlo abierto inicialmente.

Ejemplo: "Expandido", de código HTML, para maquetar el componente: "Collapsible", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- collapsible -->
<div class="-my-px py-sm border-t border-b border-neutral-base c-collapsible" data-expanded="false" data-module="c-collapsible">
  <button aria-expanded="false" id="collapsible-initially-expanded-title" class="group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" aria-controls="collapsible-initially-expanded">Cabecera del collapsible
    <span class="c-collapsible__show absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="false">Mostrar</span>
    <span class="c-collapsible__hide absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">Ocultar</span>
  </button>
  <div aria-hidden="true" class="c-collapsible__content py-sm" id="collapsible-initially-expanded">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</div>
<!-- /collapsible -->

Ejemplo: "Expandido", de código Nunjucks, para maquetar el componente: "Collapsible", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/collapsible/_macro.collapsible.njk" import componentCollapsible %}

{{ componentCollapsible({
  "id": "collapsible-initially-expanded",
  "headerText": "Cabecera del collapsible",
  "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\n      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\n      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
  "open": true
}) }}
Mostrar códigodel ejemplo: Expandido

Contenido

Nunjucks macro
{% from "components/collapsible/_macro.collapsible.njk" import componentCollapsible %}

{{ componentCollapsible({
  "id": "collapsible-initially-expanded",
  "headerText": "Cabecera del collapsible",
  "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\n      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\n      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
  "open": true
}) }}

Expandido con javascript

También puedes usar con javascript la función global activateItemCollapsible(element, open), para mostrar un item abierto o cerrado, usando su id, el parámetro open admite true o false, si le pasamos true se mostrará abierto, y si le pasamos false se mostrará cerrado. Ej: Abre la consola del navegador y escribe activateItemCollapsible('collapsible-expanded-title', true) para mostrar el item actual abierto.

Ejemplo: "Expandido con javascript", de código HTML, para maquetar el componente: "Collapsible", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- collapsible -->
<div class="-my-px py-sm border-t border-b border-neutral-base c-collapsible" data-expanded="true" data-module="c-collapsible">
  <button aria-expanded="false" id="collapsible-expanded-title" class="group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" aria-controls="collapsible-expanded">Cabecera del collapsible
    <span class="c-collapsible__show absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="false">Mostrar</span>
    <span class="c-collapsible__hide absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">Ocultar</span>
  </button>
  <div aria-hidden="true" class="c-collapsible__content py-sm" id="collapsible-expanded">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</div>
<!-- /collapsible -->

Ejemplo: "Expandido con javascript", de código Nunjucks, para maquetar el componente: "Collapsible", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/collapsible/_macro.collapsible.njk" import componentCollapsible %}

{{ componentCollapsible({
  "id": "collapsible-expanded",
  "headerText": "Cabecera del collapsible",
  "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\n      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\n      proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}) }}
Mostrar códigodel ejemplo: Expandido con javascript

Contenido

Nunjucks macro
{% from "components/collapsible/_macro.collapsible.njk" import componentCollapsible %}

{{ componentCollapsible({
  "id": "collapsible-expanded",
  "headerText": "Cabecera del collapsible",
  "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\n      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\n      proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}) }}

Con html

Ejemplo: "Con html", de código HTML, para maquetar el componente: "Collapsible", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- collapsible -->
<div class="-my-px py-sm border-t border-b border-neutral-base c-collapsible" data-expanded="true" data-module="c-collapsible">
  <button aria-expanded="false" id="collapsible-html-title" class="group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" aria-controls="collapsible-html">Cabecera del collapsible
    <span class="c-collapsible__show absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="false">Mostrar</span>
    <span class="c-collapsible__hide absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">Ocultar</span>
  </button>
  <div aria-hidden="true" class="c-collapsible__content py-sm" id="collapsible-html">
    <p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipisicing elit, sed do eiusmod
      tempor <em>incididunt</em> ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in <strong>reprehenderit</strong> in voluptate velit esse
      cillum dolore eu fugiat nulla <em>pariatur</em>. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>
<!-- /collapsible -->

Ejemplo: "Con html", de código Nunjucks, para maquetar el componente: "Collapsible", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/collapsible/_macro.collapsible.njk" import componentCollapsible %}

{{ componentCollapsible({
  "id": "collapsible-html",
  "headerText": "Cabecera del collapsible",
  "html": "<p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipisicing elit, sed do eiusmod\n      tempor <em>incididunt</em> ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n      consequat. Duis aute irure dolor in <strong>reprehenderit</strong> in voluptate velit esse\n      cillum dolore eu fugiat nulla <em>pariatur</em>. Excepteur sint occaecat cupidatat non\n      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>"
}) }}
Mostrar códigodel ejemplo: Con html

Contenido

Nunjucks macro
{% from "components/collapsible/_macro.collapsible.njk" import componentCollapsible %}

{{ componentCollapsible({
  "id": "collapsible-html",
  "headerText": "Cabecera del collapsible",
  "html": "<p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipisicing elit, sed do eiusmod\n      tempor <em>incididunt</em> ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n      consequat. Duis aute irure dolor in <strong>reprehenderit</strong> in voluptate velit esse\n      cillum dolore eu fugiat nulla <em>pariatur</em>. Excepteur sint occaecat cupidatat non\n      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>"
}) }}

Con clases aplicadas

Puedes añadir clases a todos los elementos para cambiar su apariencia

Ejemplo: "Con clases aplicadas", de código HTML, para maquetar el componente: "Collapsible", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- collapsible -->
<div class=" p-base bg-primary-light flex flex-wrap gap-base c-collapsible" data-expanded="true" data-module="c-collapsible">
  <button aria-expanded="false" id="collapsible-classes-title" class=" c-button self-start" aria-controls="collapsible-classes">Cabecera del collapsible
    <span class="c-collapsible__show  !hidden" aria-hidden="false">Mostrar</span>
    <span class="c-collapsible__hide  !hidden" aria-hidden="true">Ocultar</span>
  </button>
  <div aria-hidden="true" class="c-collapsible__content  flex-1 border border-neutral-base p-base bg-white rounded" id="collapsible-classes">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</div>
<!-- /collapsible -->

Ejemplo: "Con clases aplicadas", de código Nunjucks, para maquetar el componente: "Collapsible", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/collapsible/_macro.collapsible.njk" import componentCollapsible %}

{{ componentCollapsible({
  "id": "collapsible-classes",
  "headerText": "Cabecera del collapsible",
  "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\n      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\n      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
  "classes": "p-base bg-primary-light flex flex-wrap gap-base",
  "buttonClasses": "c-button self-start",
  "showClasses": "!hidden",
  "hideClasses": "!hidden",
  "contentClasses": "flex-1 border border-neutral-base p-base bg-white rounded"
}) }}
Mostrar códigodel ejemplo: Con clases aplicadas

Contenido

Nunjucks macro
{% from "components/collapsible/_macro.collapsible.njk" import componentCollapsible %}

{{ componentCollapsible({
  "id": "collapsible-classes",
  "headerText": "Cabecera del collapsible",
  "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\n      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\n      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
  "classes": "p-base bg-primary-light flex flex-wrap gap-base",
  "buttonClasses": "c-button self-start",
  "showClasses": "!hidden",
  "hideClasses": "!hidden",
  "contentClasses": "flex-1 border border-neutral-base p-base bg-white rounded"
}) }}