desy-html

Notification

Parámetros Nunjucks del componente: "Notification". Versión: 13.0.2

Los parámetros de Nunjucks para este componente están dentro de la siguiente etiqueta code en formato yaml.

        {"val":"params:\n- name: headingLevel\n  type: number\n  required: false\n  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.\n- name: title\n  type: object\n  required: true\n  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.\n  - name: text\n    type: string\n    required: true\n    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.\n  - name: html\n    type: string\n    required: true\n    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.\n  - name: classes\n    type: string\n    required: false\n    description: Classes to add to the notification title.\n- name: description\n  type: object\n  required: false\n  description: This is the optional description under title\n  - name: text\n    type: string\n    required: true\n    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.\n  - name: html\n    type: string\n    required: true\n    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.\n  - name: classes\n    type: string\n    required: false\n    description: Classes to add to the notification description.\n- name: content\n  type: object\n  required: false\n  description: This is the optional content under the description and items\n  - name: text\n    type: string\n    required: true\n    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.\n  - name: html\n    type: string\n    required: true\n    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.\n  - name: classes\n    type: string\n    required: false\n    description: Classes to add to the notification content.\n- name: items\n  type: array\n  required: false\n  description: This is a list of anchors. Can be used as errors links.\n  - name: href\n    type: string\n    required: false\n    description: Href attribute for the link item. If provided item will be an anchor.\n  - name: text\n    type: string\n    required: true\n    description: If `html` is set, this is not required. Text for the link item. If `html` is provided, the `text` argument will be ignored.\n  - name: html\n    type: string\n    required: true\n    description: If `text` is set, this is not required. HTML for the link item. If `html` is provided, the `text` argument will be ignored.\n  - name: attributes\n    type: object\n    required: false\n    description: HTML attributes (for example data attributes) to add to the link anchor.\n- name: icon\n  type: object\n  required: false\n  description: This is the optional icon at left\n  - name: html\n    type: string\n    required: false\n    description: Use this html to insert a custom svg inline icon. If this is set, the type are not used.\n- name: type\n  type: string\n  required: false\n  description: Predefined notification types are `success`, `alert`, `info`\n- name: isDismissible\n  type: boolean\n  required: false\n  description: If true, the notification shows a close icon on top right to close it.\n- name: id\n  type: string\n  required: true\n  description: Required id attribute to add to the div container tag and to generate the title id.\n- name: classes\n  type: string\n  required: false\n  description: Classes to add to the div container tag.\n- name: attributes\n  type: object\n  required: false\n  description: HTML attributes (for example data attributes) to add to the div container tag.\n","length":3972}

Por defecto

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

Ejemplo: "Por defecto", de código HTML, para maquetar el componente: "Notification", versión: 13.0.2, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- notification -->
<div id="default" data-module="c-notification" class="c-notification c-notification--primary">
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
      <p id="default-title" class="font-bold pr-base focus:outline-none focus:underline" tabindex="-1">
        El documento se ha cargado correctamente
      </p>
    </div>
  </div>
</div>
<!-- /notification -->

Ejemplo: "Por defecto", de código Nunjucks, para maquetar el componente: "Notification", versión: 13.0.2, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/notification/_macro.notification.njk" import componentNotification %}

{{ componentNotification({
  "title": {
    "text": "El documento se ha cargado correctamente"
  },
  "id": "default"
}) }}

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

Ejemplo: "Por defecto con html", de código HTML, para maquetar el componente: "Notification", versión: 13.0.2, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- notification -->
<div id="default-with-html" data-module="c-notification" class="c-notification c-notification--primary">
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
      <p id="default-with-html-title" class="font-bold pr-base focus:outline-none focus:underline" tabindex="-1">
        Las <a href=" # " class=" c-link ">entidades beneficiarias</a> deberán tener su sede y actividad principal en Aragón.
      </p>
    </div>
  </div>
</div>
<!-- /notification -->

Ejemplo: "Por defecto con html", de código Nunjucks, para maquetar el componente: "Notification", versión: 13.0.2, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

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

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

Ejemplo: "Con description", de código HTML, para maquetar el componente: "Notification", versión: 13.0.2, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- notification -->
<div id="with-description" data-module="c-notification" class="c-notification c-notification--primary">
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
      <p id="with-description-title" class="font-bold pr-base focus:outline-none focus:underline" tabindex="-1">
        El documento se ha cargado correctamente
      </p>
      <div>
        <p>Documento acreditativo de <em class=" italic ">registro de alta de la asociación</em> puede verse publicado ya.</p>
      </div>
    </div>
  </div>
</div>
<!-- /notification -->

Ejemplo: "Con description", de código Nunjucks, para maquetar el componente: "Notification", versión: 13.0.2, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

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

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

Ejemplo: "Con content", de código HTML, para maquetar el componente: "Notification", versión: 13.0.2, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- notification -->
<div id="with-content" data-module="c-notification" class="c-notification c-notification--primary">
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
      <p id="with-content-title" class="font-bold pr-base focus:outline-none focus:underline" tabindex="-1">
        El documento se ha cargado correctamente
      </p>
      <div class="text-sm">
        <p>Documento acreditativo de <em class=" italic ">registro de alta de la asociación</em> puede verse publicado ya.</p>
      </div>
    </div>
  </div>
</div>
<!-- /notification -->

Ejemplo: "Con content", de código Nunjucks, para maquetar el componente: "Notification", versión: 13.0.2, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

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

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

Ejemplo: "Con items", de código HTML, para maquetar el componente: "Notification", versión: 13.0.2, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- notification -->
<div id="with-items" data-module="c-notification" class="c-notification c-notification--primary">
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
      <p id="with-items-title" class="font-bold pr-base focus:outline-none focus:underline" tabindex="-1">
        Problemas encontrados
      </p>
      <ul class="mt-base">
        <li>
          <a href="#empresa" class="inline-block pb-sm c-link ">Campo Nombre de la empresa está vacío</a>
        </li>
        <li>
          <a href="#actividad" class="inline-block pb-sm c-link ">Campo Fecha de inicio de la actividad está vacío</a>
        </li>
        <li>
          <a href="#email" class="inline-block pb-sm c-link ">El formato de correo electrónico es incorrecto</a>
        </li>
      </ul>
    </div>
  </div>
</div>
<!-- /notification -->

Ejemplo: "Con items", de código Nunjucks, para maquetar el componente: "Notification", versión: 13.0.2, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

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

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

Ejemplo: "Con tipo: éxito", de código HTML, para maquetar el componente: "Notification", versión: 13.0.2, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- notification -->
<div id="type-success" 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="type-success-title" class="font-bold pr-base focus:outline-none focus:underline" tabindex="-1">
        El documento se ha cargado correctamente
      </p>
    </div>
  </div>
</div>
<!-- /notification -->

Ejemplo: "Con tipo: éxito", de código Nunjucks, para maquetar el componente: "Notification", versión: 13.0.2, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/notification/_macro.notification.njk" import componentNotification %}

{{ componentNotification({
  "title": {
    "text": "El documento se ha cargado correctamente"
  },
  "type": "success",
  "id": "type-success"
}) }}

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

Ejemplo: "Con tipo: alerta", de código HTML, para maquetar el componente: "Notification", versión: 13.0.2, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- notification -->
<div id="type-alert" 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="type-alert-title" class="font-bold pr-base focus:outline-none focus:underline" tabindex="-1">
        Problemas encontrados
      </p>
      <ul class="mt-base">
        <li>
          <a href="#empresa" class="inline-block pb-sm c-link  c-link--alert">Campo Nombre de la empresa está vacío</a>
        </li>
        <li>
          <a href="#actividad" class="inline-block pb-sm c-link  c-link--alert">Campo Fecha de inicio de la actividad está vacío</a>
        </li>
        <li>
          <a href="#email" class="inline-block pb-sm c-link  c-link--alert">El formato de correo electrónico es incorrecto</a>
        </li>
      </ul>
    </div>
  </div>
</div>
<!-- /notification -->

Ejemplo: "Con tipo: alerta", de código Nunjucks, para maquetar el componente: "Notification", versión: 13.0.2, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

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

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

Ejemplo: "Con tipo: info", de código HTML, para maquetar el componente: "Notification", versión: 13.0.2, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- notification -->
<div id="type-info" data-module="c-notification" class="c-notification c-notification--primary">
  <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-primary-base" aria-label="Información" focusable="false" role="img">
      <path d="M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm7.5 105a7.5 7.5 0 01-15 0V70a7.5 7.5 0 0115 0zM70 50a10 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="type-info-title" class="font-bold pr-base focus:outline-none focus:underline" tabindex="-1">
        ATENCIÓN: Debido a la situación por Covid-19, pide cita previa para acudir a una de nuestras oficinas.
      </p>
      <div>
        <a class=" c-link text-sm " href=" # ">Pedir cita previa</a>
      </div>
    </div>
  </div>
</div>
<!-- /notification -->

Ejemplo: "Con tipo: info", de código Nunjucks, para maquetar el componente: "Notification", versión: 13.0.2, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

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

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

Ejemplo: "Con botón de cerrar", de código HTML, para maquetar el componente: "Notification", versión: 13.0.2, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- notification -->
<div id="with-close-button" data-module="c-notification" class="c-notification c-notification--primary">
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
      <p id="with-close-button-title" class="font-bold pr-base focus:outline-none focus:underline" tabindex="-1">
        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.
      </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 -->

Ejemplo: "Con botón de cerrar", de código Nunjucks, para maquetar el componente: "Notification", versión: 13.0.2, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

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

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

Ejemplo: "Cerrar la notificación con javascript", de código HTML, para maquetar el componente: "Notification", versión: 13.0.2, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- notification -->
<div id="with-close-button-js" data-module="c-notification" class="c-notification c-notification--primary">
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
      <p id="with-close-button-js-title" class="font-bold pr-base focus:outline-none focus:underline" tabindex="-1">
        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.
      </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 -->

Ejemplo: "Cerrar la notificación con javascript", de código Nunjucks, para maquetar el componente: "Notification", versión: 13.0.2, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

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

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

Ejemplo: "Con icono personalizado y clases", de código HTML, para maquetar el componente: "Notification", versión: 13.0.2, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- notification -->
<div id="with-custom-icon" data-module="c-notification" class="c-notification border-neutral-dark bg-neutral-lighter">
  <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-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>
  </div>
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
      <p id="with-custom-icon-title" class="font-bold pr-base focus:outline-none focus:underline" tabindex="-1">
        Acaba de publicarse la lista de admitidos y excluidos de la convocatoria publicado en el BOA
      </p>
      <div>
        <a class=" c-link break-all " href=" # ">Lista de admitidos (PDF, 20Kb)</a>
      </div>
    </div>
  </div>
</div>
<!-- /notification -->

Ejemplo: "Con icono personalizado y clases", de código Nunjucks, para maquetar el componente: "Notification", versión: 13.0.2, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

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

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.

Ejemplo: "Con encabezado", de código HTML, para maquetar el componente: "Notification", versión: 13.0.2, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- notification -->
<div id="headinglevel" data-module="c-notification" class="c-notification c-notification--primary">
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
      <h3 id="headinglevel-title" class="font-bold pr-base focus:outline-none focus:underline" tabindex="-1">
        Esto es un título con h3
      </h3>
      <p>
        Y esto es una descripción necesaria tras el encabezado
      </p>
    </div>
  </div>
</div>
<!-- /notification -->

Ejemplo: "Con encabezado", de código Nunjucks, para maquetar el componente: "Notification", versión: 13.0.2, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

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

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

Ejemplo: "Con parámetros mixtos", de código HTML, para maquetar el componente: "Notification", versión: 13.0.2, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- notification -->
<div id="with-mixed-params" data-module="c-notification" class="c-notification c-notification--primary">
  <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-primary-base" aria-label="Información" focusable="false" role="img">
      <path d="M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm7.5 105a7.5 7.5 0 01-15 0V70a7.5 7.5 0 0115 0zM70 50a10 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">
      <h3 id="with-mixed-params-title" class="font-bold pr-base focus:outline-none focus:underline font-bold" tabindex="-1">
        No olvide adjuntar el registro de alta de la asociación
      </h3>
      <p>
        Necesitará el documento acreditativo de registro de alta de la asociación
      </p>
      <ul class="mt-base">
        <li>
          <a href="#" class="inline-block pb-sm c-link ">Desde modelo</a>
        </li>
        <li>
          <a href="#" class="inline-block pb-sm c-link ">Obligatorio previo a resolución</a>
        </li>
        <li>
          <a href="#" class="inline-block pb-sm c-link ">Condicionado</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 -->

Ejemplo: "Con parámetros mixtos", de código Nunjucks, para maquetar el componente: "Notification", versión: 13.0.2, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

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

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"
}) }}