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.

Modal

Por defecto

Aviso

Estamos realizando labores de mantenimiento en el sistema. Es posible que algunos procesos tarden más de lo esperado. Rogamos disculpas.

Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro
{% from "components/modal/_macro.modal.njk" import componentModal %}
{{ componentModal({
  "id": "default-example",
  "title": {
    "text": "Aviso"
  },
  "description": {
    "text": "Estamos realizando labores de mantenimiento en el sistema. Es posible que algunos procesos tarden más de lo esperado. Rogamos disculpas."
  },
  "itemsPrimary": [
    {
      "text": "De acuerdo, continuar",
      "classes": "c-button--primary"
    }
  ],
  "isDismissible": true
}) }}

Con button loader

Si quieres que las acciones muestren un Button loader en vez de un botón normal, utiliza el parámetro 'isButtonLoader': true.

Aviso

Estamos realizando labores de mantenimiento en el sistema. Es posible que algunos procesos tarden más de lo esperado. Rogamos disculpas.

Mostrar códigodel ejemplo: Con button loader

Contenido

Nunjucks macro
{% from "components/modal/_macro.modal.njk" import componentModal %}
{{ componentModal({
  "id": "button-loader-example",
  "title": {
    "text": "Aviso"
  },
  "description": {
    "text": "Estamos realizando labores de mantenimiento en el sistema. Es posible que algunos procesos tarden más de lo esperado. Rogamos disculpas."
  },
  "itemsPrimary": [
    {
      "text": "De acuerdo, continuar",
      "isButtonLoader": true,
      "state": "is-loading",
      "classes": "c-button-loader--primary c-button-loader--is-loading"
    }
  ],
  "isDismissible": true
}) }}

Con encabezado de nivel 3

Usa el parámetro 'headingLevel' para establecer el nivel del encabezado. Por ejemplo: 'headingLevel': 3 creará un encabezado <h3>.

Esto es un h3

Estamos realizando labores de mantenimiento en el sistema. Es posible que algunos procesos tarden más de lo esperado. Rogamos disculpas.

Mostrar códigodel ejemplo: Con encabezado de nivel 3

Contenido

Nunjucks macro
{% from "components/modal/_macro.modal.njk" import componentModal %}
{{ componentModal({
  "id": "headinglevel-example",
  "title": {
    "text": "Esto es un h3"
  },
  "headingLevel": 3,
  "description": {
    "text": "Estamos realizando labores de mantenimiento en el sistema. Es posible que algunos procesos tarden más de lo esperado. Rogamos disculpas."
  },
  "itemsPrimary": [
    {
      "text": "De acuerdo, continuar",
      "classes": "c-button--primary"
    }
  ],
  "isDismissible": true
}) }}

Con acción secundaria

Las acciones primarias deberán ser botones primarios y aparecer a la izquierda. Las acciones secundarias deberán ser botones por defecto y aparecer a la derecha. Si la acción es destructiva, entonces se invierte el orden y la acción principal destructiva aparece a la derecha con el modificador de Botón alerta.

Editar servicio publicado

Actualmente este servicio está publicado.

Los cambios realizados no serán visibles hasta que sean validados

Mostrar códigodel ejemplo: Con acción secundaria

Contenido

Nunjucks macro
{% from "components/modal/_macro.modal.njk" import componentModal %}
{{ componentModal({
  "id": "secondary-action-example",
  "title": {
    "text": "Editar servicio publicado"
  },
  "description": {
    "html": "<p>Actualmente este servicio está publicado.</p><p>Los cambios realizados no serán visibles hasta que sean validados</p>"
  },
  "itemsPrimary": [
    {
      "text": "Editar servicio",
      "classes": "c-button--primary"
    }
  ],
  "itemsSecondary": [
    {
      "html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>"
    }
  ],
  "isDismissible": true
}) }}

Con caller

Entre {% call %} y {% endcall %} puedes insertar el contenido anidado que desees. Útil para anidar mucho contenido dentro del componente.

Editar servicio publicado

Actualmente este servicio está publicado.

Los cambios realizados no serán visibles hasta que sean validados

Para más información, ir a la Página de ayuda

Mostrar códigodel ejemplo: Con caller

Contenido

Nunjucks macro

{% from "components/modal/_macro.modal.njk" import componentModal %}
{% call componentModal({
  "id": "caller-example",
  "title": {
    "text": "Editar servicio publicado"
  },
  "description": {
    "html": "<p>Actualmente este servicio está publicado.</p><p>Los cambios realizados no serán visibles hasta que sean validados</p>"
  },
  "itemsPrimary": [
    {
      "text": "Editar servicio",
      "classes": "c-button--primary"
    }
  ],
  "itemsSecondary": [
    {
      "html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>"
    }
  ],
  "isDismissible": true
}) %}
<div class='prose max-w-auto mx-auto'><p class='text-center text-sm'>Para más información, ir a la <a href='#'>Página de ayuda</a></p></div>
{% endcall  %}

Con muchas acciones

No es muy común, pero si lo necesitas, puedes usar varios botones en la zona de acciones primarias (a la izquierda) y de secundarias (a la derecha). Usando las clases modificadores de botones podrás darles la apariencia que desees.

Aviso

Estamos realizando labores de mantenimiento en el sistema. Es posible que algunos procesos tarden más de lo esperado. Rogamos disculpas.

Mostrar códigodel ejemplo: Con muchas acciones

Contenido

Nunjucks macro
{% from "components/modal/_macro.modal.njk" import componentModal %}
{{ componentModal({
  "id": "many-actions-example",
  "title": {
    "text": "Aviso"
  },
  "description": {
    "text": "Estamos realizando labores de mantenimiento en el sistema. Es posible que algunos procesos tarden más de lo esperado. Rogamos disculpas."
  },
  "itemsPrimary": [
    {
      "text": "Guardar cambios y publicar",
      "classes": "c-button--primary"
    },
    {
      "text": "Guardar cambios"
    }
  ],
  "itemsSecondary": [
    {
      "text": "Más información",
      "classes": "c-button--transparent"
    },
    {
      "html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>"
    }
  ],
  "isDismissible": true,
  "classes": "max-w-4xl"
}) }}

Con muchas acciones y botón loader

Aviso

Estamos realizando labores de mantenimiento en el sistema. Es posible que algunos procesos tarden más de lo esperado. Rogamos disculpas.

Mostrar códigodel ejemplo: Con muchas acciones y botón loader

Contenido

Nunjucks macro
{% from "components/modal/_macro.modal.njk" import componentModal %}
{{ componentModal({
  "id": "many-actions-is-button-loader-example",
  "title": {
    "text": "Aviso"
  },
  "description": {
    "text": "Estamos realizando labores de mantenimiento en el sistema. Es posible que algunos procesos tarden más de lo esperado. Rogamos disculpas."
  },
  "itemsPrimary": [
    {
      "text": "Guardar cambios y publicar",
      "isButtonLoader": true,
      "state": "is-success",
      "classes": "c-button-loader--primary c-button-loader--is-success"
    },
    {
      "text": "Guardar cambios",
      "isButtonLoader": true
    }
  ],
  "itemsSecondary": [
    {
      "text": "Más información",
      "isButtonLoader": true,
      "state": "is-loading",
      "classes": "c-button-loader--transparent c-button-loader--is-loading"
    },
    {
      "html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>",
      "isButtonLoader": true,
      "state": "is-success",
      "classes": "c-button-loader--is-success"
    }
  ],
  "isDismissible": true,
  "classes": "max-w-4xl"
}) }}

Con icono de tipo borrar/eliminar

Si la acción es destructiva, entonces se invierte el orden y la acción principal destructiva aparece a la derecha con el modificador de Botón alerta.

Borrar servicio

Esta acción no se puede deshacer ¿Estás seguro?

Mostrar códigodel ejemplo: Con icono de tipo borrar/eliminar

Contenido

Nunjucks macro
{% from "components/modal/_macro.modal.njk" import componentModal %}
{{ componentModal({
  "id": "icon-type-A-example",
  "title": {
    "text": "Borrar servicio"
  },
  "description": {
    "text": "Esta acción no se puede deshacer ¿Estás seguro?"
  },
  "itemsPrimary": [
    {
      "html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>"
    }
  ],
  "itemsSecondary": [
    {
      "text": "Si, borrar servicio",
      "classes": "c-button--alert"
    }
  ],
  "isDismissible": true,
  "icon": {
    "type": "delete"
  }
}) }}

Con icono de tipo descartar

Descartar cambios

Si descartas los cambios, perderás el trabajo realizado en este servicio. ¿Estás seguro?

Mostrar códigodel ejemplo: Con icono de tipo descartar

Contenido

Nunjucks macro
{% from "components/modal/_macro.modal.njk" import componentModal %}
{{ componentModal({
  "id": "icon-type-B-example",
  "title": {
    "text": "Descartar cambios"
  },
  "description": {
    "text": "Si descartas los cambios, perderás el trabajo realizado en este servicio. ¿Estás seguro?"
  },
  "itemsPrimary": [
    {
      "html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>"
    }
  ],
  "itemsSecondary": [
    {
      "text": "Si, descartar cambios",
      "classes": "c-button--alert"
    }
  ],
  "isDismissible": true,
  "icon": {
    "type": "discard"
  }
}) }}

Con icono de tipo cambios

Hay cambios sin guardar

Si sales de la pantalla de edición sin guardar, perderás los cambios realizados.

Mostrar códigodel ejemplo: Con icono de tipo cambios

Contenido

Nunjucks macro
{% from "components/modal/_macro.modal.njk" import componentModal %}
{{ componentModal({
  "id": "icon-type-C-example",
  "title": {
    "text": "Hay cambios sin guardar"
  },
  "description": {
    "text": "Si sales de la pantalla de edición sin guardar, perderás los cambios realizados."
  },
  "itemsPrimary": [
    {
      "text": "Guardar y salir",
      "classes": "c-button--primary"
    }
  ],
  "itemsSecondary": [
    {
      "text": "Descartar cambios y salir"
    }
  ],
  "isDismissible": true,
  "icon": {
    "type": "changes"
  }
}) }}

Con icono de tipo editar

Editar servicio publicado

Actualmente este servicio está publicado.

Los cambios realizados no serán visibles hasta que sean validados

Mostrar códigodel ejemplo: Con icono de tipo editar

Contenido

Nunjucks macro
{% from "components/modal/_macro.modal.njk" import componentModal %}
{{ componentModal({
  "id": "icon-type-D-example",
  "title": {
    "text": "Editar servicio publicado"
  },
  "description": {
    "html": "<p>Actualmente este servicio está publicado.</p><p>Los cambios realizados no serán visibles hasta que sean validados</p>"
  },
  "itemsPrimary": [
    {
      "text": "Lo sé, quiero editarlo",
      "classes": "c-button--primary"
    }
  ],
  "itemsSecondary": [
    {
      "html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>"
    }
  ],
  "isDismissible": true,
  "icon": {
    "type": "edit"
  }
}) }}

Con icono de tipo publicar

Publicar

Se van a publicar todos los elementos de este servicio que están pendientes de publicación.

Mostrar códigodel ejemplo: Con icono de tipo publicar

Contenido

Nunjucks macro
{% from "components/modal/_macro.modal.njk" import componentModal %}
{{ componentModal({
  "id": "icon-type-E-example",
  "title": {
    "text": "Publicar"
  },
  "description": {
    "text": "Se van a publicar todos los elementos de este servicio que están pendientes de publicación."
  },
  "itemsPrimary": [
    {
      "text": "Publicar",
      "classes": "c-button--primary"
    }
  ],
  "itemsSecondary": [
    {
      "html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>"
    }
  ],
  "isDismissible": true,
  "icon": {
    "type": "publish"
  }
}) }}

Con icono personalizado

Utiliza el parámetro "icon" y su parámetro "html" para añadir código HTML de un icono SVG inline. Utiliza los atributos de la etiqueta <svg> de este ejemplo, incluido el aria-label.

¿Estás seguro de querer cambiar de estado a múltiples archivos?

Si el contenido de la modal es muy extenso, hay que alinear los textos a la izquierda para mejorar la accesibilidad.

Acabas de seleccionar una gran cantidad de archivos. Si ejecutas la acción, el proceso puede tardar varios minutos. Durante el proceso no cierres la ventana del navegador ni naveges a otra página en esta pestaña.

¿Estás seguro de iniciar el proceso ahora?

Mostrar códigodel ejemplo: Con icono personalizado

Contenido

Nunjucks macro
{% from "components/modal/_macro.modal.njk" import componentModal %}
{{ componentModal({
  "id": "custom-icon-example",
  "title": {
    "text": "¿Estás seguro de querer cambiar de estado a múltiples archivos?",
    "classes": "c-h2 mt-base focus:outline-hidden focus:underline"
  },
  "description": {
    "html": "<p class='c-paragraph-base'>Si el contenido de la modal es muy extenso, hay que alinear los textos a la izquierda para mejorar la accesibilidad.</p><p class='c-paragraph-base'>Acabas de seleccionar una gran cantidad de archivos. Si ejecutas la acción, el proceso puede tardar varios minutos. Durante el proceso <strong>no cierres la ventana del navegador ni naveges a otra página</strong> en esta pestaña.</p><p>¿Estás seguro de iniciar el proceso ahora?</p>",
    "classes": "mb-lg text-left"
  },
  "itemsPrimary": [
    {
      "text": "Si, comenzar proceso",
      "classes": "c-button--primary"
    }
  ],
  "itemsSecondary": [
    {
      "html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>"
    }
  ],
  "isDismissible": true,
  "icon": {
    "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='1em' height='1em' class='block w-16 h-16 text-primary-light' aria-label='Pregunta' focusable='false'><path d='M12,0A12,12,0,1,0,24,12,12,12,0,0,0,12,0Zm0,19a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,12,19Zm1.6-6.08a1,1,0,0,0-.6.92,1,1,0,0,1-2,0,3,3,0,0,1,1.8-2.75A2,2,0,1,0,10,9.25a1,1,0,0,1-2,0,4,4,0,1,1,5.6,3.67Z' fill='currentColor'></path></svg>"
  }
}) }}