El área de texto es un elemento de formulario que permite la inserción de texto en varias líneas y puede contener, por defecto, un número de caracteres ilimitado.
Character-count
Parámetros Nunjucks del componente: "Character-count". 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: id\r\n type: string\r\n required: true\r\n description: The id of the textarea.\r\n- name: name\r\n type: string\r\n required: true\r\n description: The name of the textarea, which is submitted with the form data.\r\n- name: rows\r\n type: string\r\n required: false\r\n description: Optional number of textarea rows (default is 5 rows).\r\n- name: value\r\n type: string\r\n required: false\r\n description: Optional initial value of the textarea.\r\n- name: maxlength\r\n type: string\r\n required: true\r\n description: If `maxwords` is set, this is not required. The maximum number of characters. If `maxwords` is provided, the `maxlength` argument will be ignored.\r\n- name: maxwords\r\n type: string\r\n required: true\r\n description: If `maxlength` is set, this is not required. The maximum number of words. If `maxwords` is provided, the `maxlength` argument will be ignored.\r\n- name: threshold\r\n type: string\r\n required: true\r\n description: The percentage value of the limit at which point the count message is displayed. If this attribute is set, the count message will be hidden by default.\r\n- name: label\r\n type: object\r\n required: true\r\n description: Options for the label component.\r\n isComponent: true\r\n- name: hint\r\n type: object\r\n required: false\r\n description: Options for the hint component.\r\n isComponent: true\r\n- name: errorMessage\r\n type: object\r\n required: false\r\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`.\r\n isComponent: true\r\n- name: placeholder\r\n type: string\r\n required: false\r\n description: Placeholder text\r\n- name: disabled\r\n type: boolean\r\n required: false\r\n description: If true, character-count will be disabled.\r\n- name: formGroup\r\n type: object\r\n required: false\r\n description: Options for the form-group wrapper\r\n params:\r\n - name: classes\r\n type: string\r\n required: false\r\n description: Classes to add to the form group (e.g. to show error state for the whole group)\r\n- name: classes\r\n type: string\r\n required: false\r\n description: Classes to add to the textarea.\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 textarea.\r\n- name: countMessage\r\n type: object\r\n required: false\r\n description: Options for the count message\r\n params:\r\n - name: classes\r\n type: string\r\n required: false\r\n description: Classes to add to the count message","length":2529}
Mostrar parámetros
Parámetros Nunjucks del componente: "Character-count"
Ejemplo: "Por defecto", de código HTML, para maquetar el componente: "Character Count", 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>.
Ejemplo: "Placeholder", de código HTML, para maquetar el componente: "Character Count", 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>.
Ejemplo: "Deshabilitado", de código HTML, para maquetar el componente: "Character Count", 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>.
Ejemplo: "Con pista", de código HTML, para maquetar el componente: "Character Count", 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>.
Ejemplo: "Con valor por defecto", de código HTML, para maquetar el componente: "Character Count", 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>.
Ejemplo: "Con valor por defecto excediendo el límite", de código HTML, para maquetar el componente: "Character Count", 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>.
Ejemplo: "Con valor por defecto excediendo el límite", de código Nunjucks, para maquetar el componente: "Character Count", 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/character-count/_macro.character-count.njk" import componentCharacterCount %}
{{ componentCharacterCount({
"id": "exceeding-characters",
"name": "exceeding",
"maxlength": 250,
"value": "Paseo María Agustín, 36,\n 50004 Zaragoza\n",
"label": {
"text": "Dirección completa"
},
"errorMessage": {
"text": "Error: Por favor, no exceder el límite máximo"
}
}) }}
Error:Error: Por favor, no exceder el límite máximo
Puedes escribir hasta 250 caracteres
Mostrar códigodel ejemplo: Con valor por defecto excediendo el límite
Contenido
Nunjucks macro
{%from"components/character-count/_macro.character-count.njk" import componentCharacterCount %}{{ componentCharacterCount({
"id": "exceeding-characters",
"name": "exceeding",
"maxlength": 250,
"value": "Paseo María Agustín, 36,\n 50004 Zaragoza\n",
"label": {
"text": "Dirección completa"
},
"errorMessage": {
"text": "Error: Por favor, no exceder el límite máximo"
}
}) }}
Ejemplo: "Con número de filas (rows) personalizada", de código HTML, para maquetar el componente: "Character Count", 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>.
Ejemplo: "Con número de filas (rows) personalizada", de código Nunjucks, para maquetar el componente: "Character Count", 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>.
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', por defecto usará un <h1>.
Ejemplo: "Con label como encabezado", de código HTML, para maquetar el componente: "Character Count", 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>.
Ejemplo: "Con contador de palabras", de código HTML, para maquetar el componente: "Character Count", 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>.
Ejemplo: "Con threshold", de código HTML, para maquetar el componente: "Character Count", 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>.
Inline label + character-count flexible y mensaje de error
Ejemplo: "Con clases de css aplicadas", de código HTML, para maquetar el componente: "Character Count", 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>.