DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Mensaje de error

En caso de que el campo requiera validación o sea obligatorio, puede aparecer un error indicando el problema con el dato introducido.

Error-message

Parámetros Nunjucks del componente: "Error-message". Versión: 5.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: text\n  type: string\n  required: true\n  description: If `html` is set, this is not required. Text to use within the error message. 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 error message. If `html` is provided, the `text` argument will be ignored.\n- name: id\n  type: string\n  required: false\n  description: Id attribute to add to the error message span tag.\n- name: classes\n  type: string\n  required: false\n  description: Classes to add to the error message span tag.\n- name: attributes\n  type: object\n  required: false\n  description: HTML attributes (for example data attributes) to add to the error message span tag\n- name: visuallyHiddenText\n  type: string\n  description: A visually hidden prefix used before the error message. Defaults to \"Error\".","length":907}

Por defecto

Por accesibilidad, los mensajes de error deben incluir la palabra "error", para que no recaiga tan sólo en el color el hecho de que es un mensaje de error.

Ejemplo: "Por defecto", de código HTML, para maquetar el componente: "Error Message", versión: 5.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>.

<!-- error-message -->
<p class="block font-semibold text-alert-base">
  <span class="sr-only">Error:</span>Esto es un mensaje de error
</p>
<!-- /error-message -->

Ejemplo: "Por defecto", de código Nunjucks, para maquetar el componente: "Error Message", versión: 5.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/error-message/_macro.error-message.njk" import componentErrorMessage %}

{{ componentErrorMessage({
  "text": "Esto es un mensaje de error"
}) }}

Error:Esto es un mensaje de error

Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro
{% from "components/error-message/_macro.error-message.njk" import componentErrorMessage %}

{{ componentErrorMessage({
  "text": "Esto es un mensaje de error"
}) }}

Con html

Por accesibilidad, los mensajes de error deben incluir la palabra "error", para que no recaiga tan sólo en el color el hecho de que es un mensaje de error.

Ejemplo: "Con html", de código HTML, para maquetar el componente: "Error Message", versión: 5.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>.

<!-- error-message -->
<p class="block font-semibold text-alert-base">
  <span class="sr-only">Error:</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 mr-xs align-baseline text-alert-base inline-block" role="img" aria-label="Alerta">
    <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>Esto es un mensaje de error con HTML
</p>
<!-- /error-message -->

Ejemplo: "Con html", de código Nunjucks, para maquetar el componente: "Error Message", versión: 5.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/error-message/_macro.error-message.njk" import componentErrorMessage %}

{{ componentErrorMessage({
  "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-4 h-4 mr-xs align-baseline text-alert-base inline-block' role='img' aria-label='Alerta'><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>Esto es un mensaje de error con HTML"
}) }}

Error:Esto es un mensaje de error con HTML

Mostrar códigodel ejemplo: Con html

Contenido

Nunjucks macro
{% from "components/error-message/_macro.error-message.njk" import componentErrorMessage %}

{{ componentErrorMessage({
  "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-4 h-4 mr-xs align-baseline text-alert-base inline-block' role='img' aria-label='Alerta'><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>Esto es un mensaje de error con HTML"
}) }}