desy-html

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": "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">
      <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": "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">
      <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  %}