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: 4.0.2

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

        {"val":"params:\r\n- name: text\r\n  type: string\r\n  required: true\r\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.\r\n- name: html\r\n  type: string\r\n  required: true\r\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.\r\n- name: id\r\n  type: string\r\n  required: false\r\n  description: Id attribute to add to the error message span tag.\r\n- name: classes\r\n  type: string\r\n  required: false\r\n  description: Classes to add to the error message span tag.\r\n- name: attributes\r\n  type: object\r\n  required: false\r\n  description: HTML attributes (for example data attributes) to add to the error message span tag\r\n- name: visuallyHiddenText\r\n  type: string\r\n  description: A visually hidden prefix used before the error message. Defaults to \"Error\".","length":930}

Por defecto

Ejemplo: "Por defecto", de código HTML, para maquetar el componente: "Error Message", versión: 4.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>Error: esto es un mensaje de error
</p>
<!-- /error-message -->

Ejemplo: "Por defecto", de código Nunjucks, para maquetar el componente: "Error Message", versión: 4.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": "Error: esto es un mensaje de error"
}) }}

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": "Error: esto es un mensaje de error"
}) }}

Con html

Ejemplo: "Con html", de código HTML, para maquetar el componente: "Error Message", versión: 4.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>Error: esto es un <em>mensaje de error con HTML</em>
</p>
<!-- /error-message -->

Ejemplo: "Con html", de código Nunjucks, para maquetar el componente: "Error Message", versión: 4.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": "Error: esto es un <em>mensaje de error con HTML</em>"
}) }}

Error: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": "Error: esto es un <em>mensaje de error con HTML</em>"
}) }}