desy-html

Alert

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.

Alert mostrando una notificación de éxito

Utilizamos los atributos "role": "alert" y "aria-live": "assertive", para que lo lea el lector de pantalla. La función openAlert toma como primer argumento el id del elemento emergente a mostrar y como segundo argumento el nodo HTML que debe tomar foco al cerrar el elemento emergente.

Mostrar códigodel ejemplo: Alert mostrando una notificación de éxito

Contenido

Nunjucks macro


{% from "components/alert/_macro.alert.njk" import componentAlert %}
{% call componentAlert({
  "button": {
    "text": "Abrir éxito",
    "attributes": {
      "onclick": "openAlert('success-id', this)"
    }
  },
  "id": "success-id",
  "attributes": {
    "role": "alert",
    "aria-live": "assertive"
  }
}) %}
<!-- notification -->
<div id="default-id" data-module="c-notification" class="c-notification c-notification--success">
  <div class="h-full mr-base">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-5 h-5 text-success-dark" aria-label="Éxito" focusable="false" role="img"><path d="M39.94 125a19.88 19.88 0 01-15.53-7.81L2.48 92.26a10 10 0 0115-13.2l20.55 23.39a2.5 2.5 0 003.68.08l81-84.42a10.002 10.002 0 1114.5 13.78l-82.02 86.33A19.41 19.41 0 0139.94 125z" fill="currentColor"/></svg>
  </div>
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
      <p id="default-id-title"  class="font-bold pr-base focus:outline-none focus:underline outline-none" tabindex="-1">
        El documento se ha cargado correctamente
      </p>
    </div>
    <div class="absolute top-0 right-0 p-sm">
      <button type="button" class="c-notification-button__close p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none" aria-label="X: Cerrar notificación">
        <svg class="w-4 h-4 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" 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>
</div>
<!-- /notification -->
{% endcall  %}

Alert mostrando una notificación de alerta

Utilizamos los atributos "role": "alert" y "aria-live": "assertive", para que lo lea el lector de pantalla. La función openAlert toma como primer argumento el id del elemento emergente a mostrar y como segundo argumento el nodo HTML que debe tomar foco al cerrar el elemento emergente. El tercer argumento es el id del elemento al que queremos que vaya el foco al abrir el elemento emergente, que suele ser el título de una notificación.

Mostrar códigodel ejemplo: Alert mostrando una notificación de alerta

Contenido

Nunjucks macro


{% from "components/alert/_macro.alert.njk" import componentAlert %}
{% call componentAlert({
  "button": {
    "text": "Abrir alerta",
    "attributes": {
      "onclick": "openAlert('alert-id', this, 'secondary-id-title')"
    }
  },
  "id": "alert-id",
  "attributes": {
    "role": "alert",
    "aria-live": "assertive"
  }
}) %}
<!-- notification -->
<div id="secondary-id" data-module="c-notification" class="c-notification c-notification--alert">
  <div class="h-full mr-base">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-5 h-5 text-alert-base" aria-label="Error" focusable="false" role="img"><path d="M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z" fill="currentColor"/></svg>
  </div>
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
      <p id="secondary-id-title"  class="font-bold pr-base focus:outline-none focus:underline mr-lg" tabindex="-1">
        Problemas encontrados
      </p>
      <ul>
        <li>
          <a href="#empresa" class="c-link  c-link--alert">Campo Nombre de la empresa está vacío</a>
        </li>
        <li>
          <a href="#actividad" class="c-link  c-link--alert">Campo Fecha de inicio de la actividad está vacío</a>
        </li>
        <li>
          <a href="#email" class="c-link  c-link--alert">El formato de correo electrónico es incorrecto</a>
        </li>
      </ul>
    </div>
    <div class="absolute top-0 right-0 p-sm">
      <button type="button" class="c-notification-button__close p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none" aria-label="X: Cerrar notificación">
        <svg class="w-4 h-4 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" 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>
</div>
<!-- /notification -->
{% endcall  %}