desy-html

Textarea

Parámetros Nunjucks del componente: "Textarea". Versión: 13.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: id\n  type: string\n  required: true\n  description: The id of the textarea.\n- name: name\n  type: string\n  required: true\n  description: The name of the textarea, which is submitted with the form data.\n- name: rows\n  type: string\n  required: false\n  description: Optional number of textarea rows (default is 5 rows).\n- name: value\n  type: string\n  required: false\n  description: Optional initial value of the textarea.\n- name: describedBy\n  type: string\n  required: false\n  description: One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.\n- name: label\n  type: object\n  required: true\n  description: Options for the label component.\n  isComponent: true\n- name: hint\n  type: object\n  required: false\n  description: Options for the hint component.\n  isComponent: true\n- name: errorMessage\n  type: object\n  required: false\n  description: Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.\n  isComponent: true\n- name: formGroup\n  type: object\n  required: false\n  description: Options for the form-group wrapper\n  params:\n  - name: classes\n    type: string\n    required: false\n    description: Classes to add to the form group (e.g. to show error state for the whole group)\n- name: classes\n  type: string\n  required: false\n  description: Classes to add to the textarea.\n- name: autocomplete\n  type: string\n  required: false\n  description: Attribute to [identify input purpose](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html), for instance \"postal-code\" or \"username\". See [autofill](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) for full list of attributes that can be used.\n- name: placeholder\n  type: string\n  required: false\n  description: Placeholder text\n- name: disabled\n  type: boolean\n  required: false\n  description: If true, textarea will be disabled.\n- name: attributes\n  type: object\n  required: false\n  description: HTML attributes (for example data attributes) to add to the textarea.","length":2169}

Por defecto

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

<!-- textarea -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="more-detail-a">Esto es un label</label>
  <!-- /label -->
  <!-- hint -->
  <p id="more-detail-a-hint" class="block text-neutral-dark">Esto es una pista o texto descriptivo.</p>
  <!-- /hint -->
  <textarea class="block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="more-detail-a" name="more-detail-a" rows="5" aria-describedby="more-detail-a-hint"></textarea>
</div>
<!-- /textarea -->

Ejemplo: "Por defecto", de código Nunjucks, para maquetar el componente: "Textarea", versión: 13.0.1, 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/textarea/_macro.textarea.njk" import componentTextarea %}

{{ componentTextarea({
  "name": "more-detail-a",
  "id": "more-detail-a",
  "label": {
    "text": "Esto es un label"
  },
  "hint": {
    "text": "Esto es una pista o texto descriptivo."
  }
}) }}

Esto es una pista o texto descriptivo.

Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro
{% from "components/textarea/_macro.textarea.njk" import componentTextarea %}

{{ componentTextarea({
  "name": "more-detail-a",
  "id": "more-detail-a",
  "label": {
    "text": "Esto es un label"
  },
  "hint": {
    "text": "Esto es una pista o texto descriptivo."
  }
}) }}

Deshabilitado

Ejemplo: "Deshabilitado", de código HTML, para maquetar el componente: "Textarea", versión: 13.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: 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>.

<!-- textarea -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="more-detail-b">Esto es un label</label>
  <!-- /label -->
  <!-- hint -->
  <p id="more-detail-b-hint" class="block text-neutral-dark">Esto es una pista o texto descriptivo.</p>
  <!-- /hint -->
  <textarea class="block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="more-detail-b" name="more-detail-b" rows="5" aria-describedby="more-detail-b-hint" disabled></textarea>
</div>
<!-- /textarea -->

Ejemplo: "Deshabilitado", de código Nunjucks, para maquetar el componente: "Textarea", versión: 13.0.1, 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/textarea/_macro.textarea.njk" import componentTextarea %}

{{ componentTextarea({
  "name": "more-detail-b",
  "id": "more-detail-b",
  "disabled": true,
  "label": {
    "text": "Esto es un label"
  },
  "hint": {
    "text": "Esto es una pista o texto descriptivo."
  }
}) }}

Esto es una pista o texto descriptivo.

Mostrar códigodel ejemplo: Deshabilitado

Contenido

Nunjucks macro
{% from "components/textarea/_macro.textarea.njk" import componentTextarea %}

{{ componentTextarea({
  "name": "more-detail-b",
  "id": "more-detail-b",
  "disabled": true,
  "label": {
    "text": "Esto es un label"
  },
  "hint": {
    "text": "Esto es una pista o texto descriptivo."
  }
}) }}

Con mensaje de error

Ejemplo: "Con mensaje de error", de código HTML, para maquetar el componente: "Textarea", versión: 13.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: 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>.

<!-- textarea -->
<div class="c-form-group c-form-group--error">
  <!-- label -->
  <label class="block" for="no-ni-reason">Esto es un label</label>
  <!-- /label -->
  <!-- error-message -->
  <p id="no-ni-reason-error" class="block font-semibold text-alert-base">
    <span class="sr-only">Error:</span>Error: esto es un mensaje de error
  </p>
  <!-- /error-message -->
  <textarea class="block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base border-alert-base ring-2 ring-alert-base " id="no-ni-reason" name="no-ni-reason" rows="5" aria-errormessage="no-ni-reason-error" aria-invalid="true"></textarea>
</div>
<!-- /textarea -->

Ejemplo: "Con mensaje de error", de código Nunjucks, para maquetar el componente: "Textarea", versión: 13.0.1, 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/textarea/_macro.textarea.njk" import componentTextarea %}

{{ componentTextarea({
  "name": "no-ni-reason",
  "id": "no-ni-reason",
  "label": {
    "text": "Esto es un label"
  },
  "errorMessage": {
    "text": "Error: esto es un mensaje de error"
  }
}) }}

Error:Error: esto es un mensaje de error

Mostrar códigodel ejemplo: Con mensaje de error

Contenido

Nunjucks macro
{% from "components/textarea/_macro.textarea.njk" import componentTextarea %}

{{ componentTextarea({
  "name": "no-ni-reason",
  "id": "no-ni-reason",
  "label": {
    "text": "Esto es un label"
  },
  "errorMessage": {
    "text": "Error: esto es un mensaje de error"
  }
}) }}

Con valor por defecto

Ejemplo: "Con valor por defecto", de código HTML, para maquetar el componente: "Textarea", versión: 13.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: 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>.

<!-- textarea -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="full-address-a">Dirección completa</label>
  <!-- /label -->
  <textarea class="block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="full-address-a" name="address-a" rows="5">Calle Rosales 25. 2 izda</textarea>
</div>
<!-- /textarea -->

Ejemplo: "Con valor por defecto", de código Nunjucks, para maquetar el componente: "Textarea", versión: 13.0.1, 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/textarea/_macro.textarea.njk" import componentTextarea %}

{{ componentTextarea({
  "id": "full-address-a",
  "name": "address-a",
  "value": "Calle Rosales 25. 2 izda",
  "label": {
    "text": "Dirección completa"
  }
}) }}
Mostrar códigodel ejemplo: Con valor por defecto

Contenido

Nunjucks macro
{% from "components/textarea/_macro.textarea.njk" import componentTextarea %}

{{ componentTextarea({
  "id": "full-address-a",
  "name": "address-a",
  "value": "Calle Rosales 25. 2 izda",
  "label": {
    "text": "Dirección completa"
  }
}) }}

Con número de filas (rows) personalizada

Ejemplo: "Con número de filas (rows) personalizada", de código HTML, para maquetar el componente: "Textarea", versión: 13.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: 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>.

<!-- textarea -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="full-address-b">Dirección completa</label>
  <!-- /label -->
  <textarea class="block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="full-address-b" name="address-b" rows="8"></textarea>
</div>
<!-- /textarea -->

Ejemplo: "Con número de filas (rows) personalizada", de código Nunjucks, para maquetar el componente: "Textarea", versión: 13.0.1, 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/textarea/_macro.textarea.njk" import componentTextarea %}

{{ componentTextarea({
  "id": "full-address-b",
  "name": "address-b",
  "label": {
    "text": "Dirección completa"
  },
  "rows": 8
}) }}
Mostrar códigodel ejemplo: Con número de filas (rows) personalizada

Contenido

Nunjucks macro
{% from "components/textarea/_macro.textarea.njk" import componentTextarea %}

{{ componentTextarea({
  "id": "full-address-b",
  "name": "address-b",
  "label": {
    "text": "Dirección completa"
  },
  "rows": 8
}) }}

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

Ejemplo: "Con label como encabezado", de código HTML, para maquetar el componente: "Textarea", versión: 13.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: 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>.

<!-- textarea -->
<div class="c-form-group">
  <!-- label -->
  <h1 class="block ">
    <label class="block" for="textarea-with-page-heading-a">Esto es un label dentro de un encabezado &lt;h1&gt;</label>
  </h1>
  <!-- /label -->
  <textarea class="block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="textarea-with-page-heading-a" name="address" rows="5"></textarea>
</div>
<!-- /textarea -->

Ejemplo: "Con label como encabezado", de código Nunjucks, para maquetar el componente: "Textarea", versión: 13.0.1, 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/textarea/_macro.textarea.njk" import componentTextarea %}

{{ componentTextarea({
  "id": "textarea-with-page-heading-a",
  "name": "address",
  "label": {
    "text": "Esto es un label dentro de un encabezado <h1>",
    "isPageHeading": true
  }
}) }}

Mostrar códigodel ejemplo: Con label como encabezado

Contenido

Nunjucks macro
{% from "components/textarea/_macro.textarea.njk" import componentTextarea %}

{{ componentTextarea({
  "id": "textarea-with-page-heading-a",
  "name": "address",
  "label": {
    "text": "Esto es un label dentro de un encabezado <h1>",
    "isPageHeading": true
  }
}) }}

Con clases de form-group opcionales

Ejemplo: "Con clases de form-group opcionales", de código HTML, para maquetar el componente: "Textarea", versión: 13.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: 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>.

<!-- textarea -->
<div class="c-form-group p-base bg-primary-light">
  <!-- label -->
  <label class="block" for="textarea-with-page-heading-b">Dirección completa</label>
  <!-- /label -->
  <textarea class="block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="textarea-with-page-heading-b" name="address" rows="5"></textarea>
</div>
<!-- /textarea -->

Ejemplo: "Con clases de form-group opcionales", de código Nunjucks, para maquetar el componente: "Textarea", versión: 13.0.1, 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/textarea/_macro.textarea.njk" import componentTextarea %}

{{ componentTextarea({
  "id": "textarea-with-page-heading-b",
  "name": "address",
  "label": {
    "text": "Dirección completa"
  },
  "formGroup": {
    "classes": "p-base bg-primary-light"
  }
}) }}
Mostrar códigodel ejemplo: Con clases de form-group opcionales

Contenido

Nunjucks macro
{% from "components/textarea/_macro.textarea.njk" import componentTextarea %}

{{ componentTextarea({
  "id": "textarea-with-page-heading-b",
  "name": "address",
  "label": {
    "text": "Dirección completa"
  },
  "formGroup": {
    "classes": "p-base bg-primary-light"
  }
}) }}

Con valores de autocompletado

Ejemplo: "Con valores de autocompletado", de código HTML, para maquetar el componente: "Textarea", versión: 13.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: 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>.

<!-- textarea -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="textarea-with-autocomplete-attribute">Dirección completa</label>
  <!-- /label -->
  <textarea class="block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="textarea-with-autocomplete-attribute" name="address" rows="5" autocomplete="street-address"></textarea>
</div>
<!-- /textarea -->

Ejemplo: "Con valores de autocompletado", de código Nunjucks, para maquetar el componente: "Textarea", versión: 13.0.1, 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/textarea/_macro.textarea.njk" import componentTextarea %}

{{ componentTextarea({
  "id": "textarea-with-autocomplete-attribute",
  "name": "address",
  "label": {
    "text": "Dirección completa"
  },
  "autocomplete": "street-address"
}) }}
Mostrar códigodel ejemplo: Con valores de autocompletado

Contenido

Nunjucks macro
{% from "components/textarea/_macro.textarea.njk" import componentTextarea %}

{{ componentTextarea({
  "id": "textarea-with-autocomplete-attribute",
  "name": "address",
  "label": {
    "text": "Dirección completa"
  },
  "autocomplete": "street-address"
}) }}

Placeholder

Ejemplo: "Placeholder", de código HTML, para maquetar el componente: "Textarea", versión: 13.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: 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>.

<!-- textarea -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="con-placeholder">Valor</label>
  <!-- /label -->
  <textarea class="block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="con-placeholder" name="placeholder" rows="5" placeholder="Esto es un placeholder"></textarea>
</div>
<!-- /textarea -->

Ejemplo: "Placeholder", de código Nunjucks, para maquetar el componente: "Textarea", versión: 13.0.1, 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/textarea/_macro.textarea.njk" import componentTextarea %}

{{ componentTextarea({
  "id": "con-placeholder",
  "name": "placeholder",
  "label": {
    "text": "Valor"
  },
  "placeholder": "Esto es un placeholder"
}) }}
Mostrar códigodel ejemplo: Placeholder

Contenido

Nunjucks macro
{% from "components/textarea/_macro.textarea.njk" import componentTextarea %}

{{ componentTextarea({
  "id": "con-placeholder",
  "name": "placeholder",
  "label": {
    "text": "Valor"
  },
  "placeholder": "Esto es un placeholder"
}) }}

Con clases de css aplicadas

Label inline + Textarea flexible y Mensaje de error

Ejemplo: "Con clases de css aplicadas", de código HTML, para maquetar el componente: "Textarea", versión: 13.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: 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>.

<!-- textarea -->
<div class="c-form-group c-form-group--error lg:flex lg:flex-wrap lg:items-start lg:gap-x-base">
  <!-- label -->
  <label class="block lg:py-sm lg:mt-sm" for="classes-applied-b">Label inline:</label>
  <!-- /label -->
  <!-- error-message -->
  <p id="classes-applied-b-error" class="block font-semibold text-alert-base order-1 w-full pt-sm">
    <span class="sr-only">Error:</span>Error: Esto es un mensaje de error
  </p>
  <!-- /error-message -->
  <textarea class="block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base lg:flex-1 border-alert-base ring-2 ring-alert-base " id="classes-applied-b" name="classes-applied-b" rows="5" aria-errormessage="classes-applied-b-error" aria-invalid="true"></textarea>
</div>
<!-- /textarea -->

Ejemplo: "Con clases de css aplicadas", de código Nunjucks, para maquetar el componente: "Textarea", versión: 13.0.1, 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/textarea/_macro.textarea.njk" import componentTextarea %}

{{ componentTextarea({
  "formGroup": {
    "classes": "lg:flex lg:flex-wrap lg:items-start lg:gap-x-base"
  },
  "label": {
    "text": "Label inline:",
    "classes": "lg:py-sm lg:mt-sm"
  },
  "id": "classes-applied-b",
  "name": "classes-applied-b",
  "errorMessage": {
    "text": "Error: Esto es un mensaje de error",
    "classes": "order-1 w-full pt-sm"
  },
  "classes": "lg:flex-1"
}) }}

Error:Error: Esto es un mensaje de error

Mostrar códigodel ejemplo: Con clases de css aplicadas

Contenido

Nunjucks macro
{% from "components/textarea/_macro.textarea.njk" import componentTextarea %}

{{ componentTextarea({
  "formGroup": {
    "classes": "lg:flex lg:flex-wrap lg:items-start lg:gap-x-base"
  },
  "label": {
    "text": "Label inline:",
    "classes": "lg:py-sm lg:mt-sm"
  },
  "id": "classes-applied-b",
  "name": "classes-applied-b",
  "errorMessage": {
    "text": "Error: Esto es un mensaje de error",
    "classes": "order-1 w-full pt-sm"
  },
  "classes": "lg:flex-1"
}) }}