Pista
Opcional, es una descripción del dato a introducir.
Hint
Parámetros Nunjucks del componente: "Hint". 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 hint. 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 hint. If `html` is provided, the `text` argument will be ignored.\r\n- name: id\r\n type: string\r\n required: true\r\n description: Optional id attribute to add to the hint span tag.\r\n- name: classes\r\n type: string\r\n required: false\r\n description: Classes to add to the hint 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 hint span tag.\r\n\r\naccessibilityCriteria: |\r\n When used with a single input, the hint MUST:\r\n - be announced by screen readers when the input is focussed\r\n\r\n When used with a group of multiple inputs (such as within a fieldset), the\r\n hint MUST:\r\n - be announced by screen readers when focussing the first input within the\r\n group (first in this case refers to the focus order, not the DOM - if the\r\n user is traversing backwards through the page then this would be the last\r\n input within the group in the DOM)\r\n\r\n When used with a group of multiple inputs, the hint SHOULD NOT:\r\n - be announced every time for each individual input","length":1391}
Mostrar parámetros
Parámetros Nunjucks del componente: "Hint"
params:
- name: text
type: string
required: true
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.
- name: html
type: string
required: true
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.
- name: id
type: string
required: true
description: Optional id attribute to add to the hint span tag.
- name: classes
type: string
required: false
description: Classes to add to the hint span tag.
- name: attributes
type: object
required: false
description: HTML attributes (for example data attributes) to add to the hint span tag.
accessibilityCriteria: |
When used with a single input, the hint MUST:
- be announced by screen readers when the input is focussed
When used with a group of multiple inputs (such as within a fieldset), the
hint MUST:
- be announced by screen readers when focussing the first input within the
group (first in this case refers to the focus order, not the DOM - if the
user is traversing backwards through the page then this would be the last
input within the group in the DOM)
When used with a group of multiple inputs, the hint SHOULD NOT:
- be announced every time for each individual input
Por defecto #
Ejemplo: "Por defecto", de código HTML, para maquetar el componente: "Hint", 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>.
<!-- 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: 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/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
Con html #
Ejemplo: "Con html", de código HTML, para maquetar el componente: "Hint", 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>.
<!-- 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: 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/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