DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Notificaciones

Avisos

Las notificaciones se emplean para dar un mensaje de actualización o para destacar alguna información sobre la que queremos llamar la atención.

Notification

Por defecto

Este componente se suele mostrar con un componente Alert, que incluye un contenedor con los atributos role="alert" y aria-live="assertive".

El documento se ha cargado correctamente

Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro
{% from "components/notification/_macro.notification.njk" import componentNotification %}
{{ componentNotification({
  "title": {
    "text": "El documento se ha cargado correctamente"
  },
  "id": "default"
}) }}

Por defecto con html

Las entidades beneficiarias deberán tener su sede y actividad principal en Aragón.

Mostrar códigodel ejemplo: Por defecto con html

Contenido

Nunjucks macro
{% from "components/notification/_macro.notification.njk" import componentNotification %}
{{ componentNotification({
  "title": {
    "html": "Las <a href=' # ' class=' c-link '>entidades beneficiarias</a> deberán tener su sede y actividad principal en Aragón."
  },
  "id": "default-with-html"
}) }}

Con description

El documento se ha cargado correctamente

Documento acreditativo de registro de alta de la asociación puede verse publicado ya.

Mostrar códigodel ejemplo: Con description

Contenido

Nunjucks macro
{% from "components/notification/_macro.notification.njk" import componentNotification %}
{{ componentNotification({
  "title": {
    "html": "El documento se ha cargado correctamente"
  },
  "description": {
    "html": "<p>Documento acreditativo de <em class=\" italic \">registro de alta de la asociación</em> puede verse publicado ya.</p>"
  },
  "id": "with-description"
}) }}

Con content

El documento se ha cargado correctamente

Documento acreditativo de registro de alta de la asociación puede verse publicado ya.

Mostrar códigodel ejemplo: Con content

Contenido

Nunjucks macro
{% from "components/notification/_macro.notification.njk" import componentNotification %}
{{ componentNotification({
  "title": {
    "html": "El documento se ha cargado correctamente"
  },
  "content": {
    "html": "<p>Documento acreditativo de <em class=\" italic \">registro de alta de la asociación</em> puede verse publicado ya.</p>"
  },
  "id": "with-content"
}) }}

Con items

Problemas encontrados

Mostrar códigodel ejemplo: Con items

Contenido

Nunjucks macro
{% from "components/notification/_macro.notification.njk" import componentNotification %}
{{ componentNotification({
  "title": {
    "text": "Problemas encontrados"
  },
  "items": [
    {
      "text": "Campo Nombre de la empresa está vacío",
      "href": "#empresa"
    },
    {
      "text": "Campo Fecha de inicio de la actividad está vacío",
      "href": "#actividad"
    },
    {
      "text": "El formato de correo electrónico es incorrecto",
      "href": "#email"
    }
  ],
  "id": "with-items"
}) }}

Con tipo: éxito

El documento se ha cargado correctamente

Mostrar códigodel ejemplo: Con tipo: éxito

Contenido

Nunjucks macro
{% from "components/notification/_macro.notification.njk" import componentNotification %}
{{ componentNotification({
  "title": {
    "text": "El documento se ha cargado correctamente"
  },
  "type": "success",
  "id": "type-success"
}) }}

Con tipo: alerta

Problemas encontrados

Mostrar códigodel ejemplo: Con tipo: alerta

Contenido

Nunjucks macro
{% from "components/notification/_macro.notification.njk" import componentNotification %}
{{ componentNotification({
  "title": {
    "text": "Problemas encontrados"
  },
  "items": [
    {
      "text": "Campo Nombre de la empresa está vacío",
      "href": "#empresa"
    },
    {
      "text": "Campo Fecha de inicio de la actividad está vacío",
      "href": "#actividad"
    },
    {
      "text": "El formato de correo electrónico es incorrecto",
      "href": "#email"
    }
  ],
  "type": "alert",
  "id": "type-alert"
}) }}

Con tipo: info

ATENCIÓN: Debido a la situación por Covid-19, pide cita previa para acudir a una de nuestras oficinas.

Mostrar códigodel ejemplo: Con tipo: info

Contenido

Nunjucks macro
{% from "components/notification/_macro.notification.njk" import componentNotification %}
{{ componentNotification({
  "title": {
    "text": "ATENCIÓN: Debido a la situación por Covid-19, pide cita previa para acudir a una de nuestras oficinas."
  },
  "description": {
    "html": "<a class=' c-link text-sm ' href=' # '>Pedir cita previa</a> "
  },
  "type": "info",
  "id": "type-info"
}) }}

Con botón de cerrar

Usa el parámetro 'isDismissible': true

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut distinctio error non, reiciendis repudiandae reprehenderit minima quia laboriosam voluptate, quo veniam expedita possimus ex nam consequuntur autem eveniet, saepe ea.

Mostrar códigodel ejemplo: Con botón de cerrar

Contenido

Nunjucks macro
{% from "components/notification/_macro.notification.njk" import componentNotification %}
{{ componentNotification({
  "title": {
    "text": "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut distinctio error non, reiciendis repudiandae reprehenderit minima quia laboriosam voluptate, quo veniam expedita possimus ex nam consequuntur autem eveniet, saepe ea."
  },
  "isDismissible": true,
  "id": "with-close-button"
}) }}

Cerrar la notificación con javascript

Puedes usar con javascript la función global closeItemNotification(element), para cerrar la notificación. Ej: Abre la consola del navegador y escribe closeItemNotification('with-close-button-js') para cerrar la notificación. Es necesario usar el parámetro 'isDismissible': true

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut distinctio error non, reiciendis repudiandae reprehenderit minima quia laboriosam voluptate, quo veniam expedita possimus ex nam consequuntur autem eveniet, saepe ea.

Mostrar códigodel ejemplo: Cerrar la notificación con javascript

Contenido

Nunjucks macro
{% from "components/notification/_macro.notification.njk" import componentNotification %}
{{ componentNotification({
  "title": {
    "text": "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut distinctio error non, reiciendis repudiandae reprehenderit minima quia laboriosam voluptate, quo veniam expedita possimus ex nam consequuntur autem eveniet, saepe ea."
  },
  "isDismissible": true,
  "id": "with-close-button-js"
}) }}

Con icono personalizado y clases

Acaba de publicarse la lista de admitidos y excluidos de la convocatoria publicado en el BOA

Mostrar códigodel ejemplo: Con icono personalizado y clases

Contenido

Nunjucks macro
{% from "components/notification/_macro.notification.njk" import componentNotification %}
{{ componentNotification({
  "title": {
    "text": "Acaba de publicarse la lista de admitidos y excluidos de la convocatoria publicado en el BOA"
  },
  "description": {
    "html": "<a class=' c-link break-all ' href=' # '>Lista de admitidos (PDF, 20Kb)</a> "
  },
  "icon": {
    "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-8 h-8' aria-label='Atención' focusable='false'><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>"
  },
  "id": "with-custom-icon",
  "classes": "border-neutral-dark bg-neutral-lighter"
}) }}

Con encabezado

Usa el parámetro 'headingLevel' para establecer el nivel del encabezado. En este ejemplo: 'headingLevel': 3 creará un encabezado <h3>. Recuerda que tras el encabezado debe ir una descripción ya que, por accesibilidad, un encabezado no puede estar solo sin que tras él haya algún texto.

Esto es un título con h3

Y esto es una descripción necesaria tras el encabezado

Mostrar códigodel ejemplo: Con encabezado

Contenido

Nunjucks macro
{% from "components/notification/_macro.notification.njk" import componentNotification %}
{{ componentNotification({
  "headingLevel": 3,
  "title": {
    "text": "Esto es un título con h3"
  },
  "description": {
    "text": "Y esto es una descripción necesaria tras el encabezado"
  },
  "id": "headinglevel"
}) }}

Con parámetros mixtos

No olvide adjuntar el registro de alta de la asociación

Necesitará el documento acreditativo de registro de alta de la asociación

Mostrar códigodel ejemplo: Con parámetros mixtos

Contenido

Nunjucks macro
{% from "components/notification/_macro.notification.njk" import componentNotification %}
{{ componentNotification({
  "headingLevel": 3,
  "title": {
    "text": "No olvide adjuntar el registro de alta de la asociación",
    "classes": "font-bold"
  },
  "description": {
    "text": "Necesitará el documento acreditativo de registro de alta de la asociación"
  },
  "items": [
    {
      "text": "Desde modelo",
      "href": "#"
    },
    {
      "text": "Obligatorio previo a resolución",
      "href": "#"
    },
    {
      "text": "Condicionado",
      "href": "#"
    }
  ],
  "type": "info",
  "isDismissible": true,
  "id": "with-mixed-params"
}) }}