Etiqueta
Indica la información a incluir en el campo, siempre tiene que estar. En caso de que se quiera ocultar deberá tener la clase sr-only, para que sea legible por los lectores de pantalla.
Label
Parámetros Nunjucks del componente: "Label". Versión: 4.0.0
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 label. 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 label. If `html` is provided, the `text` argument will be ignored.\n- name: for\n type: string\n required: true\n description: The value of the for attribute, the id of the input the label is associated with.\n- name: isPageHeading\n type: boolean\n required: false\n description: Whether the label also acts as the heading for the page.\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: classes\n type: string\n required: false\n description: Classes to add to the label tag.\n- name: attributes\n type: object\n required: false\n description: HTML attributes (for example data attributes) to add to the label tag.","length":1078}
Mostrar parámetros
Parámetros Nunjucks del componente: "Label"
params:
- name: text
type: string
required: true
description: If `html` is set, this is not required. Text to use within the label. 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 label. If `html` is provided, the `text` argument will be ignored.
- name: for
type: string
required: true
description: The value of the for attribute, the id of the input the label is associated with.
- name: isPageHeading
type: boolean
required: false
description: Whether the label also acts as the heading for the page.
- name: headingLevel
type: number
required: false
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.
- name: classes
type: string
required: false
description: Classes to add to the label tag.
- name: attributes
type: object
required: false
description: HTML attributes (for example data attributes) to add to the label tag.
Por defecto #
Ejemplo: "Por defecto", de código HTML, para maquetar el componente: "Label", versión: 4.0.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: 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>.
<!-- label -->
<label class="block">Esto es un label</label>
<!-- /label -->
Ejemplo: "Por defecto", de código Nunjucks, para maquetar el componente: "Label", versión: 4.0.0, 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/label/_macro.label.njk" import componentLabel %}
{{ componentLabel({
"text": "Esto es un label"
}) }}
Mostrar códigodel ejemplo: Por defecto
Con clases de css aplicadas #
Ejemplo: "Con clases de css aplicadas", de código HTML, para maquetar el componente: "Label", versión: 4.0.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: 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>.
<!-- label -->
<label class="block inline-block p-base bg-primary-light">Esto es un label</label>
<!-- /label -->
Ejemplo: "Con clases de css aplicadas", de código Nunjucks, para maquetar el componente: "Label", versión: 4.0.0, 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/label/_macro.label.njk" import componentLabel %}
{{ componentLabel({
"classes": "inline-block p-base bg-primary-light",
"text": "Esto es un label"
}) }}
Mostrar códigodel ejemplo: Con clases de css aplicadas
Con label como encabezado #
Utiliza el parámetro 'isPageheading': true para que el label esté dentro de un encabezado. Usa el parámetro 'headingLevel' para establecer el nivel del encabezado. Por ejemplo: 'headingLevel': 3 creará un encabezado <h3>. Si no se establece un 'headingLevel', el label no estará rodeado de un encabezado.
Ejemplo: "Con label como encabezado", de código HTML, para maquetar el componente: "Label", versión: 4.0.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: 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>.
<!-- label -->
<h1 class="block ">
<label class="block c-h1">Esto es un label</label>
</h1>
<!-- /label -->
Ejemplo: "Con label como encabezado", de código Nunjucks, para maquetar el componente: "Label", versión: 4.0.0, 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/label/_macro.label.njk" import componentLabel %}
{{ componentLabel({
"text": "Esto es un label",
"classes": "c-h1",
"isPageHeading": true
}) }}
Mostrar códigodel ejemplo: Con label como encabezado
Con label como encabezado con h3 #
Utiliza el parámetro 'isPageheading': true para que el label esté dentro de un encabezado. Usa el parámetro 'headingLevel' para establecer el nivel del encabezado. Por ejemplo: 'headingLevel': 3 creará un encabezado <h3>.
Ejemplo: "Con label como encabezado con h3", de código HTML, para maquetar el componente: "Label", versión: 4.0.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: 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>.
<!-- label -->
<h3 class="block ">
<label class="block c-h3">Esto es un label</label>
</h3>
<!-- /label -->
Ejemplo: "Con label como encabezado con h3", de código Nunjucks, para maquetar el componente: "Label", versión: 4.0.0, 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/label/_macro.label.njk" import componentLabel %}
{{ componentLabel({
"text": "Esto es un label",
"classes": "c-h3",
"isPageHeading": true,
"headingLevel": "3"
}) }}
Mostrar códigodel ejemplo: Con label como encabezado con h3