DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Modal

Avisos

Se trata de una ventana emergente o pop-up y se emplean cuando queremos centrar toda la atención en cierta información, generalmente, cuando se requiere alguna acción antes de continuar con el proceso.

Dialog

Mostrar parámetros

Parámetros del componente

              params:
- name: button
  type: component
  required: true
  description: Button component to intereact with the dialog.
- name: labelledId
  type: string
  required: true
  description: Required id attribute to reference with aria-labelledby in the div container tag.
- name: id
  type: string
  required: true
  description: Required id attribute to add to the div container tag.
- name: classes
  type: string
  required: false
  description: Classes to add to the div container tag.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the div container tag.
- name: caller
  type: nunjucks-block
  required: true
  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 item component in a `call` block.

Un dialog es un componente que permite mostrar otro componente que se muestra sobre la página, con una capa negra semitransparente por debajo. Se utiliza para mostrar modales o para mostrar el menú móvil de la cabecera. Si haces click en la capa negra de debajo o si pulsas la tecla Esc se cierra el contenido del Dialog. Mira el código para ver cómo usamos la función openDialog, el primer parámetro es el id del contenido a mostrar, el segundo parámetro es el nodo que debe tomar foco al cerrar el dialog, y el tercer elemento es el id del elemento al que se le da el foco al abrir el contenido. En este ejemplo de modal usamos los atributos de accesibilidad: "role":"dialog" y "aria-modal": true

Mostrar códigodel ejemplo: Modal lanzado con un dialog

Contenido

Nunjucks macro


{% from "components/dialog/_macro.dialog.njk" import componentDialog %}
{% call componentDialog({
  "button": {
    "text": "Abrir modal",
    "attributes": {
      "onclick": "openDialog('default', this, 'label-default-example')",
      "id": "button-label-default-example"
    }
  },
  "id": "default",
  "classes": "hidden lg:absolute lg:inset-0 min-h-screen",
  "attributes": {
    "role": "dialog",
    "aria-labelledby": "label-default-example",
    "aria-modal": true
  }
}) %}
<!-- modal -->
<div id="default-example" class="mt-16 sm:mt-0 relative max-w-lg mx-auto p-base lg:p-lg border border-neutral-base rounded bg-white">
  <h2 id="label-default-example" class="c-h2 px-base text-center focus:outline-none focus:underline" tabindex="-1">
    Aviso
  </h2>
  <p class="c-p my-base text-center">
    Estamos realizando labores de mantenimiento en el sistema. Es posible que algunos procesos tarden más de lo esperado. Rogamos disculpas.
  </p>
  <div class="flex flex-wrap gap-sm w-full justify-center">
    <div class="mt-sm">
      
      
      <!-- button -->
      <button class="c-button c-button--primary"  onclick="closeDialog(this)">
        De acuerdo, continuar
      </button>
      <!-- /button -->
    </div>
  </div>
  <div class="absolute top-0 right-0 p-sm lg:p-base">
    <button onclick="closeDialog(this)" class="p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none" aria-label="X: Cerrar la ventana emergente" type="button">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4" aria-hidden="true" role="presentation"><path d="M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z" fill="currentColor"/></svg>
    </button>
  </div>
</div>
<!-- /modal -->
{% endcall  %}

Mostrar códigodel ejemplo: Modal lanzado con un dialog con acciones secundarias

Contenido

Nunjucks macro


{% from "components/dialog/_macro.dialog.njk" import componentDialog %}
{% call componentDialog({
  "button": {
    "text": "Abrir modal con acciones secundarias",
    "attributes": {
      "onclick": "openDialog('secondary', this, 'label-secondary-action-example')",
      "id": "button-label-secondary-action-example"
    }
  },
  "id": "secondary",
  "classes": "hidden lg:absolute lg:inset-0 min-h-screen",
  "attributes": {
    "role": "dialog",
    "aria-labelledby": "secondary-action-example",
    "aria-modal": true
  }
}) %}
<!-- modal -->
<div id="secondary-action-example" class="mt-16 sm:mt-0 relative max-w-lg mx-auto p-base lg:p-lg border border-neutral-base rounded bg-white">
  <h2 id="label-secondary-action-example" class="c-h2 px-base text-center focus:outline-none focus:underline" tabindex="-1">
    Editar servicio publicado
  </h2>
  <div class="c-paragraph-base my-base text-center">
    Actualmente este servicio está publicado. <br>Los cambios realizados no serán visibles hasta que sean validados
  </div>
  <div class="flex flex-wrap gap-sm w-full justify-between">
    <div class="mt-sm">
      
      
      <!-- button -->
      <button class="c-button c-button--primary" >
        Editar servicio
      </button>
      <!-- /button -->
    </div>
    <div class="mt-sm">
      
      
      <!-- button -->
      <button class="c-button"  onclick="closeDialog(this)">
        Cancelar <span class="sr-only">y cerrar la ventana modal</span>
      </button>
      <!-- /button -->
    </div>
  </div>
  <div class="absolute top-0 right-0 p-sm lg:p-base">
    <button onclick="closeDialog(this)" class="p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none" aria-label="X: Cerrar la ventana emergente" type="button">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4" aria-hidden="true" role="presentation"><path d="M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z" fill="currentColor"/></svg>
    </button>
  </div>
</div>
<!-- /modal -->
{% endcall  %}

También puedes usar con javascript la función global openDialog(dialog, focusAfterClosed, focusFirst), para abrir la modal usando su id. La función admite tres parámetros dialog, que es el id de la modal que queremos abrir, focusAfterClosed, el elemento que tendrá el foco cuando cerremos la modal, y focusFirst, el elemento que tendra el foco al abrir la modal. Ej: Abre la consola del navegador y escribe openDialog("modal-javascript", "button-javascript-action-example", "label-javascript-action-example") para mostrar la modal.

Mostrar códigodel ejemplo: Modal lanzado con un dialog con javascript

Contenido

Nunjucks macro


{% from "components/dialog/_macro.dialog.njk" import componentDialog %}
{% call componentDialog({
  "button": {
    "text": "Abrir modal con JavaScript",
    "attributes": {
      "onclick": "openDialog('modal-javascript', this, 'label-javascript-action-example')",
      "id": "button-javascript-action-example"
    }
  },
  "id": "modal-javascript",
  "classes": "hidden lg:absolute lg:inset-0 min-h-screen",
  "attributes": {
    "role": "dialog",
    "aria-labelledby": "javascript-action-example",
    "aria-modal": true
  }
}) %}
<!-- modal -->
<div id="javascript-action-example" class="mt-16 sm:mt-0 relative max-w-lg mx-auto p-base lg:p-lg border border-neutral-base rounded bg-white">
  <h2 id="label-javascript-action-example" class="c-h2 px-base text-center focus:outline-none focus:underline" tabindex="-1">
    Servicio publicado
  </h2>
  <div class="c-paragraph-base my-base text-center">
    Actualmente este servicio está publicado. <br>Los cambios realizados no serán visibles hasta que sean validados
  </div>
  <div class="flex flex-wrap gap-sm w-full justify-center">
    <div class="mt-sm">
      
      
      <!-- button -->
      <button class="c-button"  onclick="closeDialog(this)">
        Cerrar
      </button>
      <!-- /button -->
    </div>
  </div>
  <div class="absolute top-0 right-0 p-sm lg:p-base">
    <button onclick="closeDialog(this)" class="p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none" aria-label="X: Cerrar la ventana emergente" type="button">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4" aria-hidden="true" role="presentation"><path d="M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z" fill="currentColor"/></svg>
    </button>
  </div>
</div>
<!-- /modal -->
{% endcall  %}