DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Detalles

Mostrar y ocultar

Son elementos desplegables que incluyen información adicional generalmente en forma de texto.

Details

Parámetros Nunjucks del componente: "Details". Versión: 4.0.1

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

        {"val":"params:\n- name: summary\n  type: object\n  required: true\n  description: Summary that opens the content\n  - name: text\n    type: string\n    required: true\n    description: If `html` is set, this is not required. Text to use within the summary element (the visible part of the details element). If `summaryHtml` is provided, the `summaryText` 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 summary element (the visible part of the details element). If `summaryHtml` is provided, the `summaryText` argument will be ignored.\n  - name: classes\n    type: string\n    required: false\n    description: Classes to add to the inner `span` container inside the `<summary>` element. If not privided, it uses .c-link class.\n- name: containerClasses\n  type: string\n  required: false\n  description: Classes that can be added to the inner container.\n- name: id\n  type: string\n  required: false\n  description: Id to add to the details element.\n- name: open\n  type: boolean\n  required: false\n  description: If true, details element will be expanded.\n- name: classes\n  type: string\n  required: false\n  description: Classes to add to the `<details>` element.\n- name: attributes\n  type: object\n  required: false\n  description: HTML attributes (for example data attributes) to add to the `<details>` element.\n- name: caller\n  type: nunjucks-block\n  required: false\n  description: Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire dropdown component in a `call` block.","length":1811}

Por defecto

Ejemplo: "Por defecto", de código HTML, para maquetar el componente: "Details", versión: 4.0.1, 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>.

<!-- details -->
<details class="">
  <summary class="py-sm cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black">
    <span class="c-link">
      Más información
    </span>
  </summary>
  <div class="py-sm">
    <div>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid distinctio mollitia itaque placeat voluptatibus, veritatis recusandae odio facere corporis laboriosam quam quia sequi, possimus consequatur enim veniam eius soluta esse.</p>
    </div>
  </div>
</details>
<!-- /details -->

Ejemplo: "Por defecto", de código Nunjucks, para maquetar el componente: "Details", versión: 4.0.1, 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/details/_macro.details.njk" import componentDetails %}
{% call componentDetails ("{\"summary\":{\"html\":\"Más información\"}}") %}
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid distinctio mollitia itaque placeat voluptatibus, veritatis recusandae odio facere corporis laboriosam quam quia sequi, possimus consequatur enim veniam eius soluta esse.</p>

{% endcall  %}
Más información

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid distinctio mollitia itaque placeat voluptatibus, veritatis recusandae odio facere corporis laboriosam quam quia sequi, possimus consequatur enim veniam eius soluta esse.

Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro

{% from "components/details/_macro.details.njk" import componentDetails %}
{% call componentDetails({
  "summary": {
    "html": "Más información"
  }
}) %}
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid distinctio mollitia itaque placeat voluptatibus, veritatis recusandae odio facere corporis laboriosam quam quia sequi, possimus consequatur enim veniam eius soluta esse.</p>
{% endcall  %}

Expandido

Usa el parámetro 'open': true para mostrar inicialmente abierto un item.

Ejemplo: "Expandido", de código HTML, para maquetar el componente: "Details", versión: 4.0.1, 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>.

<!-- details -->
<details id="mas-informacion" class="" open>
  <summary class="py-sm cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black">
    <span class="c-link">
      Más información
    </span>
  </summary>
  <div class="py-sm">
    <div>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptates eum cupiditate quod minima consequuntur, eveniet aspernatur eius, consectetur ad, a enim atque dicta, repellat voluptatum iusto hic perspiciatis laboriosam unde.</p>
    </div>
  </div>
</details>
<!-- /details -->

Ejemplo: "Expandido", de código Nunjucks, para maquetar el componente: "Details", versión: 4.0.1, 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/details/_macro.details.njk" import componentDetails %}
{% call componentDetails ("{\"id\":\"mas-informacion\",\"summary\":{\"text\":\"Más información\"},\"open\":true}") %}
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptates eum cupiditate quod minima consequuntur, eveniet aspernatur eius, consectetur ad, a enim atque dicta, repellat voluptatum iusto hic perspiciatis laboriosam unde.</p>

{% endcall  %}
Más información

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptates eum cupiditate quod minima consequuntur, eveniet aspernatur eius, consectetur ad, a enim atque dicta, repellat voluptatum iusto hic perspiciatis laboriosam unde.

Mostrar códigodel ejemplo: Expandido

Contenido

Nunjucks macro

{% from "components/details/_macro.details.njk" import componentDetails %}
{% call componentDetails({
  "id": "mas-informacion",
  "summary": {
    "text": "Más información"
  },
  "open": true
}) %}
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptates eum cupiditate quod minima consequuntur, eveniet aspernatur eius, consectetur ad, a enim atque dicta, repellat voluptatum iusto hic perspiciatis laboriosam unde.</p>
{% endcall  %}

Con html

Ejemplo: "Con html", de código HTML, para maquetar el componente: "Details", versión: 4.0.1, 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>.

<!-- details -->
<details class="">
  <summary class="py-sm cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black">
    <span class="c-link">
      Más información <em>actualizada</em>
    </span>
  </summary>
  <div class="py-sm">
    <div>
      <p>Lorem ipsum dolor, sit amet consectetur, adipisicing elit. Quae omnis ipsa eius dolorum, maiores! Labore quaerat nam pariatur minima consectetur, tempora magnam. At sequi quidem exercitationem velit id, pariatur, animi.</p>
    </div>
  </div>
</details>
<!-- /details -->

Ejemplo: "Con html", de código Nunjucks, para maquetar el componente: "Details", versión: 4.0.1, 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/details/_macro.details.njk" import componentDetails %}
{% call componentDetails ("{\"summary\":{\"html\":\"Más información <em>actualizada</em>\"}}") %}
<p>Lorem ipsum dolor, sit amet consectetur, adipisicing elit. Quae omnis ipsa eius dolorum, maiores! Labore quaerat nam pariatur minima consectetur, tempora magnam. At sequi quidem exercitationem velit id, pariatur, animi.</p>

{% endcall  %}
Más información actualizada

Lorem ipsum dolor, sit amet consectetur, adipisicing elit. Quae omnis ipsa eius dolorum, maiores! Labore quaerat nam pariatur minima consectetur, tempora magnam. At sequi quidem exercitationem velit id, pariatur, animi.

Mostrar códigodel ejemplo: Con html

Contenido

Nunjucks macro

{% from "components/details/_macro.details.njk" import componentDetails %}
{% call componentDetails({
  "summary": {
    "html": "Más información <em>actualizada</em>"
  }
}) %}
<p>Lorem ipsum dolor, sit amet consectetur, adipisicing elit. Quae omnis ipsa eius dolorum, maiores! Labore quaerat nam pariatur minima consectetur, tempora magnam. At sequi quidem exercitationem velit id, pariatur, animi.</p>
{% endcall  %}

Con clases

Ejemplo: "Con clases", de código HTML, para maquetar el componente: "Details", versión: 4.0.1, 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>.

<!-- details -->
<details class=" p-base bg-primary-light text-primary-base">
  <summary class="py-sm cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black">
    <span class="hover:underline">
      Más información <em>actualizada</em>
    </span>
  </summary>
  <div class="py-sm">
    <div class="p-base">
      <p>Lorem ipsum dolor, sit amet <strong>consectetur</strong>, adipisicing elit. Quae omnis ipsa eius dolorum, maiores! Labore quaerat nam pariatur minima consectetur, tempora magnam. At sequi quidem exercitationem velit id, pariatur, animi.</p>
    </div>
  </div>
</details>
<!-- /details -->

Ejemplo: "Con clases", de código Nunjucks, para maquetar el componente: "Details", versión: 4.0.1, 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/details/_macro.details.njk" import componentDetails %}
{% call componentDetails ("{\"summary\":{\"html\":\"Más información <em>actualizada</em>\",\"classes\":\"hover:underline\"},\"classes\":\"p-base bg-primary-light text-primary-base\",\"containerClasses\":\"p-base\"}") %}
<p>Lorem ipsum dolor, sit amet <strong>consectetur</strong>, adipisicing elit. Quae omnis ipsa eius dolorum, maiores! Labore quaerat nam pariatur minima consectetur, tempora magnam. At sequi quidem exercitationem velit id, pariatur, animi.</p>

{% endcall  %}
Más información actualizada

Lorem ipsum dolor, sit amet consectetur, adipisicing elit. Quae omnis ipsa eius dolorum, maiores! Labore quaerat nam pariatur minima consectetur, tempora magnam. At sequi quidem exercitationem velit id, pariatur, animi.

Mostrar códigodel ejemplo: Con clases

Contenido

Nunjucks macro

{% from "components/details/_macro.details.njk" import componentDetails %}
{% call componentDetails({
  "summary": {
    "html": "Más información <em>actualizada</em>",
    "classes": "hover:underline"
  },
  "classes": "p-base bg-primary-light text-primary-base",
  "containerClasses": "p-base"
}) %}
<p>Lorem ipsum dolor, sit amet <strong>consectetur</strong>, adipisicing elit. Quae omnis ipsa eius dolorum, maiores! Labore quaerat nam pariatur minima consectetur, tempora magnam. At sequi quidem exercitationem velit id, pariatur, animi.</p>
{% endcall  %}