DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

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

Mostrar parámetros

Parámetros del componente

              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

Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro

{% from "components/label/_macro.label.njk" import componentLabel %}

{{ componentLabel({
  "text": "Esto es un label"
}) }}

Con clases de css aplicadas

Mostrar códigodel ejemplo: Con clases de css aplicadas

Contenido

Nunjucks macro

{% from "components/label/_macro.label.njk" import componentLabel %}

{{ componentLabel({
  "classes": "inline-block p-base bg-primary-light",
  "text": "Esto es un label"
}) }}

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.

Mostrar códigodel ejemplo: Con label como encabezado

Contenido

Nunjucks macro

{% from "components/label/_macro.label.njk" import componentLabel %}

{{ componentLabel({
  "text": "Esto es un label",
  "classes": "c-h1",
  "isPageHeading": true
}) }}

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>.

Mostrar códigodel ejemplo: Con label como encabezado con h3

Contenido

Nunjucks macro

{% from "components/label/_macro.label.njk" import componentLabel %}

{{ componentLabel({
  "text": "Esto es un label",
  "classes": "c-h3",
  "isPageHeading": true,
  "headingLevel": "3"
}) }}