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

Mostrar parámetros

Parámetros del componente

              params:
- 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. If no headingLevel is present the title will be a p tag.
- name: title
  type: object
  required: true
  description: This is the title. It's a h4 that can have text or html inside. Has tabindex=-1 and an id, that is the same as notification id with the -title suffix, to receive focus programatically.
  - 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 notification title.
- name: description
  type: object
  required: false
  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 notification description.
- name: content
  type: object
  required: false
  description: This is the optional content under the description and items
  - 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 notification content.
- name: items
  type: array
  required: false
  description: This is a list of anchors. Can be used as errors links.
  - name: href
    type: string
    required: false
    description: Href attribute for the link item. If provided item will be an anchor.
  - name: text
    type: string
    required: true
    description: If `html` is set, this is not required. Text for the link item. 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 for the link item. If `html` is provided, the `text` argument will be ignored.
  - name: attributes
    type: object
    required: false
    description: HTML attributes (for example data attributes) to add to the link anchor.
- 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 notification types are `success`, `alert`, `info`
- name: isDismissible
  type: boolean
  required: false
  description: If true, the notification 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 and to generate the title id.
- 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.

Por defecto

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=\" # \">http://www.boa.aragon.es/cgi-bin/EBOA/BRSCGI?CMD=VEROBJ&MLKOB=1119520063030&type=pdf</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>.

Esto es un título con h3

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"
  },
  "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({
  "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"
}) }}