desy-html

Error-summary

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

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

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

Por defecto

Ejemplo: "Por defecto", de código HTML, para maquetar el componente: "Error Summary", versión: 12.1.0, 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-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.1.0, 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-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.1.0, 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-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.1.0, 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-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.1.0, 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-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.1.0, 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-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.1.0, 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-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.1.0, 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-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.1.0, 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-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.1.0, 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-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"
    }
  ]
}) }}