desy-html

Hint

Parámetros Nunjucks del componente: "Hint". 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: text\n  type: string\n  required: true\n  description: If `html` is set, this is not required. Text to use within the hint. 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 hint. If `html` is provided, the `text` argument will be ignored.\n- name: id\n  type: string\n  required: true\n  description: Optional id attribute to add to the hint span tag.\n- name: classes\n  type: string\n  required: false\n  description: Classes to add to the hint span tag.\n- name: attributes\n  type: object\n  required: false\n  description: HTML attributes (for example data attributes) to add to the hint span tag.\n\naccessibilityCriteria: |\n  When used with a single input, the hint MUST:\n  - be announced by screen readers when the input is focussed\n\n  When used with a group of multiple inputs (such as within a fieldset), the\n  hint MUST:\n  - be announced by screen readers when focussing the first input within the\n    group (first in this case refers to the focus order, not the DOM - if the\n    user is traversing backwards through the page then this would be the last\n    input within the group in the DOM)\n\n  When used with a group of multiple inputs, the hint SHOULD NOT:\n  - be announced every time for each individual input","length":1357}

Por defecto

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

<!-- hint -->
<p class="block text-neutral-dark">Esto es una pista o hint.</p>
<!-- /hint -->

Ejemplo: "Por defecto", de código Nunjucks, para maquetar el componente: "Hint", 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/hint/_macro.hint.njk" import componentHint %}

{{ componentHint({
  "text": "Esto es una pista o hint."
}) }}

Esto es una pista o hint.

Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro
{% from "components/hint/_macro.hint.njk" import componentHint %}

{{ componentHint({
  "text": "Esto es una pista o hint."
}) }}

Con html

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

<!-- hint -->
<p class="block text-neutral-dark">Esto es una <strong>pista</strong> o <em>hint</em>.</p>
<!-- /hint -->

Ejemplo: "Con html", de código Nunjucks, para maquetar el componente: "Hint", 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/hint/_macro.hint.njk" import componentHint %}

{{ componentHint({
  "html": "Esto es una <strong>pista</strong> o <em>hint</em>."
}) }}

Esto es una pista o hint.

Mostrar códigodel ejemplo: Con html

Contenido

Nunjucks macro
{% from "components/hint/_macro.hint.njk" import componentHint %}

{{ componentHint({
  "html": "Esto es una <strong>pista</strong> o <em>hint</em>."
}) }}