desy-html

Modal

Mostrar parámetros

Parámetros del componente

              params:
- name: title
  type: object
  required: true
  description: This is the title
  - name: text
    type: string
    required: true
    description: If `html` is set, this is not required. Text to use within the title. If `html` is provided, the `text` argument will be ignored.
  - name: html
    type: string
    required: true
    description: If `text` is set, this is not required. HTML to use within the title. If `html` is provided, the `text` argument will be ignored.
  - name: classes
    type: string
    required: false
    description: Classes to add to the item title.
- name: headingLevel
  type: number
  required: false
  description: If headingLevel is 1, the parent heading tag needed inside this component will be a h1, if 2 will be a h2, and so on.
- name: description
  type: object
  required: true
  description: This is the optional description under title
  - name: text
    type: string
    required: true
    description: If `html` is set, this is not required. Text to use within the title. If `html` is provided, the `text` argument will be ignored.
  - name: html
    type: string
    required: true
    description: If `text` is set, this is not required. HTML to use within the title. If `html` is provided, the `text` argument will be ignored.
  - name: classes
    type: string
    required: false
    description: Classes to add to the item description.
- name: itemsPrimary
  type: array
  required: false
  description: This is a list of primary action buttons (see button component params) placed left side from secondary items or centered if are alone. If additional item param `isButtonLoader` is `true` then a ButtonLoader component will be used.
- name: itemsSecondary
  type: array
  required: false
  description: This is a list of secondary action buttons (see button component params) placed right side from primary items or centered if are alone. If additional item param `isButtonLoader` is `true` then a ButtonLoader component will be used.
- name: icon
  type: object
  required: false
  description: This is the optional icon at left
  - name: html
    type: string
    required: false
    description: Use this html to insert a custom svg inline icon. If this is set, the type are not used.
  - name: type
    type: string
    required: false
    description: Predefined icon types are `discard`, `delete`, `edit`, `changes` and `publish`
- name: isDismissible
  type: boolean
  required: false
  description: If `true`, the modal shows a close icon on top right to close it.
- 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: false
  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.

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-none focus:underline"
  },
  "description": {
    "html": "<p>Si el contenido de la modal es muy extenso, hay que alinear los textos a la izquierda para mejorar la accesibilidad.</p><p>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>"
  }
}) }}