desy-html

Error-summary

Parámetros Nunjucks del componente: "Error-summary". Versión: 12.0.1

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

        {"val":"params:\n- name: titleText\n  type: string\n  required: true\n  description: If `titleHtml` is set, this is not required. Text to use for the heading of the error summary block. If `titleHtml` is provided, `titleText` will be ignored.\n- name: titleHtml\n  type: string\n  required: true\n  description: If `titleText` is set, this is not required. HTML to use for the heading of the error summary block. If `titleHtml` is provided, `titleText` will be ignored.\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.\n- name: descriptionText\n  type: string\n  required: false\n  description: Text to use for the description of the errors. If you set `descriptionHtml`, the component will ignore `descriptionText`.\n- name: descriptionHtml\n  type: string\n  required: false\n  description: HTML to use for the description of the errors. If you set this option, the component will ignore `descriptionText`.\n- name: errorList\n  type: array\n  required: true\n  description: Contains an array of error link items and all their available arguments.\n  params:\n  - name: href\n    type: string\n    required: false\n    description: Href attribute for the error 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 error 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 error 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 error link anchor.\n- name: classes\n  type: string\n  required: false\n  description: Classes to add to the error-summary container.\n- name: attributes\n  type: object\n  required: false\n  description: HTML attributes (for example data attributes) to add to the error-summary container.\n\naccessibilityCriteria: |\n  - Must be focused when the page loads","length":2193}

Por defecto

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

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

<!-- error-summary -->
<div class="p-base bg-white border-2 border-alert-base" aria-labelledby="error-summary-title" role="alert" tabindex="-1" data-module="c-error-summary">
  <h2 class="mb-base font-bold" id="error-summary-title">
    Problemas encontrados
  </h2>
  <div>
    <ul class="font-semibold text-alert-base">
      <li>
        <a href="#example-error-1" class="c-link c-link--alert">El campo de Nombre no puede estar vacío.</a>
      </li>
      <li>
        <a href="#example-error-2" class="c-link c-link--alert">El campo de Teléfono no es correcto. Introduce una cifra de, al menos, 9 dígitos.</a>
      </li>
    </ul>
  </div>
</div>
<!-- /error-summary -->

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

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

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

{% from "components/error-summary/_macro.error-summary.njk" import componentErrorSummary %}

{{ componentErrorSummary({
  "titleText": "Problemas encontrados",
  "headingLevel": 2,
  "errorList": [
    {
      "text": "El campo de Nombre no puede estar vacío.",
      "href": "#example-error-1"
    },
    {
      "text": "El campo de Teléfono no es correcto. Introduce una cifra de, al menos, 9 dígitos.",
      "href": "#example-error-2"
    }
  ]
}) }}
Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro
{% from "components/error-summary/_macro.error-summary.njk" import componentErrorSummary %}

{{ componentErrorSummary({
  "titleText": "Problemas encontrados",
  "headingLevel": 2,
  "errorList": [
    {
      "text": "El campo de Nombre no puede estar vacío.",
      "href": "#example-error-1"
    },
    {
      "text": "El campo de Teléfono no es correcto. Introduce una cifra de, al menos, 9 dígitos.",
      "href": "#example-error-2"
    }
  ]
}) }}

Con encabezado de nivel 3

Ejemplo: "Con encabezado de nivel 3", de código HTML, para maquetar el componente: "Error Summary", versión: 12.0.1, 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: 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: desy-html.

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

<!-- error-summary -->
<div class="p-base bg-white border-2 border-alert-base" aria-labelledby="error-summary-title" role="alert" tabindex="-1" data-module="c-error-summary">
  <h3 class="mb-base font-bold" id="error-summary-title">
    Título con h3
  </h3>
  <div>
    <ul class="font-semibold text-alert-base">
      <li>
        <a href="#example-error-1" class="c-link c-link--alert">El campo de Nombre no puede estar vacío.</a>
      </li>
      <li>
        <a href="#example-error-2" class="c-link c-link--alert">El campo de Teléfono no es correcto. Introduce una cifra de, al menos, 9 dígitos.</a>
      </li>
    </ul>
  </div>
</div>
<!-- /error-summary -->

Ejemplo: "Con encabezado de nivel 3", de código Nunjucks, para maquetar el componente: "Error Summary", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

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

{% from "components/error-summary/_macro.error-summary.njk" import componentErrorSummary %}

{{ componentErrorSummary({
  "titleText": "Título con h3",
  "headingLevel": 3,
  "errorList": [
    {
      "text": "El campo de Nombre no puede estar vacío.",
      "href": "#example-error-1"
    },
    {
      "text": "El campo de Teléfono no es correcto. Introduce una cifra de, al menos, 9 dígitos.",
      "href": "#example-error-2"
    }
  ]
}) }}
Mostrar códigodel ejemplo: Con encabezado de nivel 3

Contenido

Nunjucks macro
{% from "components/error-summary/_macro.error-summary.njk" import componentErrorSummary %}

{{ componentErrorSummary({
  "titleText": "Título con h3",
  "headingLevel": 3,
  "errorList": [
    {
      "text": "El campo de Nombre no puede estar vacío.",
      "href": "#example-error-1"
    },
    {
      "text": "El campo de Teléfono no es correcto. Introduce una cifra de, al menos, 9 dígitos.",
      "href": "#example-error-2"
    }
  ]
}) }}

Sin enlaces

Ejemplo: "Sin enlaces", de código HTML, para maquetar el componente: "Error Summary", versión: 12.0.1, 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: 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: desy-html.

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

<!-- error-summary -->
<div class="p-base bg-white border-2 border-alert-base" aria-labelledby="error-summary-title" role="alert" tabindex="-1" data-module="c-error-summary">
  <h2 class="mb-base font-bold" id="error-summary-title">
    Problemas encontrados
  </h2>
  <div>
    <ul class="font-semibold text-alert-base">
      <li>
        Nombre de usuario o contraseña incorrectos.
      </li>
    </ul>
  </div>
</div>
<!-- /error-summary -->

Ejemplo: "Sin enlaces", de código Nunjucks, para maquetar el componente: "Error Summary", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

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

{% from "components/error-summary/_macro.error-summary.njk" import componentErrorSummary %}

{{ componentErrorSummary({
  "titleText": "Problemas encontrados",
  "headingLevel": 2,
  "errorList": [
    {
      "text": "Nombre de usuario o contraseña incorrectos."
    }
  ]
}) }}
Mostrar códigodel ejemplo: Sin enlaces

Contenido

Nunjucks macro
{% from "components/error-summary/_macro.error-summary.njk" import componentErrorSummary %}

{{ componentErrorSummary({
  "titleText": "Problemas encontrados",
  "headingLevel": 2,
  "errorList": [
    {
      "text": "Nombre de usuario o contraseña incorrectos."
    }
  ]
}) }}

Con y sin enlaces

Ejemplo: "Con y sin enlaces", de código HTML, para maquetar el componente: "Error Summary", versión: 12.0.1, 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: 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: desy-html.

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

<!-- error-summary -->
<div class="p-base bg-white border-2 border-alert-base" aria-labelledby="error-summary-title" role="alert" tabindex="-1" data-module="c-error-summary">
  <h2 class="mb-base font-bold" id="error-summary-title">
    Problemas encontrados
  </h2>
  <div>
    <ul class="font-semibold text-alert-base">
      <li>
        Nombre de usuario o contraseña incorrectos.
      </li>
      <li>
        <a href="#example-error-1" class="c-link c-link--alert">Acepta los términos del servicio para acceder.</a>
      </li>
    </ul>
  </div>
</div>
<!-- /error-summary -->

Ejemplo: "Con y sin enlaces", de código Nunjucks, para maquetar el componente: "Error Summary", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

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

{% from "components/error-summary/_macro.error-summary.njk" import componentErrorSummary %}

{{ componentErrorSummary({
  "titleText": "Problemas encontrados",
  "headingLevel": 2,
  "errorList": [
    {
      "text": "Nombre de usuario o contraseña incorrectos."
    },
    {
      "text": "Acepta los términos del servicio para acceder.",
      "href": "#example-error-1"
    }
  ]
}) }}
Mostrar códigodel ejemplo: Con y sin enlaces

Contenido

Nunjucks macro
{% from "components/error-summary/_macro.error-summary.njk" import componentErrorSummary %}

{{ componentErrorSummary({
  "titleText": "Problemas encontrados",
  "headingLevel": 2,
  "errorList": [
    {
      "text": "Nombre de usuario o contraseña incorrectos."
    },
    {
      "text": "Acepta los términos del servicio para acceder.",
      "href": "#example-error-1"
    }
  ]
}) }}

Con todo

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

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

<!-- error-summary -->
<div class="p-base bg-white border-2 border-alert-base" aria-labelledby="error-summary-title" role="alert" tabindex="-1" data-module="c-error-summary">
  <h2 class="mb-base font-bold" id="error-summary-title">
    Problemas encontrados
  </h2>
  <div>
    <p class="mb-base">
      Por favor, corrige los problemas siguientes.
    </p>
    <ul class="font-semibold text-alert-base">
      <li>
        Nombre de usuario o contraseña incorrectos.
      </li>
      <li>
        <a href="#example-error-1" class="c-link c-link--alert">Acepta los términos del servicio para acceder.</a>
      </li>
    </ul>
  </div>
</div>
<!-- /error-summary -->

Ejemplo: "Con todo", de código Nunjucks, para maquetar el componente: "Error Summary", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

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

{% from "components/error-summary/_macro.error-summary.njk" import componentErrorSummary %}

{{ componentErrorSummary({
  "titleText": "Problemas encontrados",
  "headingLevel": 2,
  "descriptionText": "Por favor, corrige los problemas siguientes.",
  "errorList": [
    {
      "text": "Nombre de usuario o contraseña incorrectos."
    },
    {
      "text": "Acepta los términos del servicio para acceder.",
      "href": "#example-error-1"
    }
  ]
}) }}
Mostrar códigodel ejemplo: Con todo

Contenido

Nunjucks macro
{% from "components/error-summary/_macro.error-summary.njk" import componentErrorSummary %}

{{ componentErrorSummary({
  "titleText": "Problemas encontrados",
  "headingLevel": 2,
  "descriptionText": "Por favor, corrige los problemas siguientes.",
  "errorList": [
    {
      "text": "Nombre de usuario o contraseña incorrectos."
    },
    {
      "text": "Acepta los términos del servicio para acceder.",
      "href": "#example-error-1"
    }
  ]
}) }}