desy-html

Character-count

Parámetros Nunjucks del componente: "Character-count". Versión: 13.0.2

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: maxlength\n  type: string\n  required: true\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.\n- name: maxwords\n  type: string\n  required: true\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.\n- name: threshold\n  type: string\n  required: true\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.\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: placeholder\n  type: string\n  required: false\n  description: Placeholder text\n- name: disabled\n  type: boolean\n  required: false\n  description: If true, character-count will be disabled.\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: attributes\n  type: object\n  required: false\n  description: HTML attributes (for example data attributes) to add to the textarea.\n- name: countMessage\n  type: object\n  required: false\n  description: Options for the count message\n  params:\n  - name: classes\n    type: string\n    required: false\n    description: Classes to add to the count message","length":2452}

Por defecto

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

<!-- character-count -->
<div data-maxlength="250">
  <!-- textarea -->
  <div class="c-form-group mb-0">
    <!-- label -->
    <label class="block" for="more-detail-a">Esto es un label</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 js-character-count" id="more-detail-a" name="more-detail-a" rows="5" aria-describedby="more-detail-a-info"></textarea>
  </div>
  <!-- /textarea -->
  <!-- hint -->
  <p id="more-detail-a-info" class="block text-neutral-dark mt-xs text-sm" aria-live="polite">Puedes escribir hasta 250 caracteres</p>
  <!-- /hint -->
</div>
<!-- /character-count -->

Ejemplo: "Por defecto", de código Nunjucks, para maquetar el componente: "Character Count", versión: 13.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({
  "name": "more-detail-a",
  "id": "more-detail-a",
  "maxlength": 250,
  "label": {
    "text": "Esto es un label"
  }
}) }}

Puedes escribir hasta 250 caracteres

Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro
{% from "components/character-count/_macro.character-count.njk" import componentCharacterCount %}

{{ componentCharacterCount({
  "name": "more-detail-a",
  "id": "more-detail-a",
  "maxlength": 250,
  "label": {
    "text": "Esto es un label"
  }
}) }}

Placeholder

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

<!-- character-count -->
<div data-maxlength="250">
  <!-- textarea -->
  <div class="c-form-group mb-0">
    <!-- label -->
    <label class="block" for="con-placeholder">Esto es un label</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 js-character-count" id="con-placeholder" name="con-placeholder" rows="5" aria-describedby="con-placeholder-info" placeholder="Esto es un placeholder"></textarea>
  </div>
  <!-- /textarea -->
  <!-- hint -->
  <p id="con-placeholder-info" class="block text-neutral-dark mt-xs text-sm" aria-live="polite">Puedes escribir hasta 250 caracteres</p>
  <!-- /hint -->
</div>
<!-- /character-count -->

Ejemplo: "Placeholder", de código Nunjucks, para maquetar el componente: "Character Count", versión: 13.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({
  "name": "con-placeholder",
  "id": "con-placeholder",
  "maxlength": 250,
  "placeholder": "Esto es un placeholder",
  "label": {
    "text": "Esto es un label"
  }
}) }}

Puedes escribir hasta 250 caracteres

Mostrar códigodel ejemplo: Placeholder

Contenido

Nunjucks macro
{% from "components/character-count/_macro.character-count.njk" import componentCharacterCount %}

{{ componentCharacterCount({
  "name": "con-placeholder",
  "id": "con-placeholder",
  "maxlength": 250,
  "placeholder": "Esto es un placeholder",
  "label": {
    "text": "Esto es un label"
  }
}) }}

Deshabilitado

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

<!-- character-count -->
<div data-maxlength="250">
  <!-- textarea -->
  <div class="c-form-group mb-0">
    <!-- label -->
    <label class="block" for="more-detail-b">Esto es un label</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 js-character-count" id="more-detail-b" name="more-detail-b" rows="5" aria-describedby="more-detail-b-info" disabled></textarea>
  </div>
  <!-- /textarea -->
  <!-- hint -->
  <p id="more-detail-b-info" class="block text-neutral-dark mt-xs text-sm" aria-live="polite">Puedes escribir hasta 250 caracteres</p>
  <!-- /hint -->
</div>
<!-- /character-count -->

Ejemplo: "Deshabilitado", de código Nunjucks, para maquetar el componente: "Character Count", versión: 13.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({
  "name": "more-detail-b",
  "id": "more-detail-b",
  "maxlength": 250,
  "disabled": true,
  "label": {
    "text": "Esto es un label"
  }
}) }}

Puedes escribir hasta 250 caracteres

Mostrar códigodel ejemplo: Deshabilitado

Contenido

Nunjucks macro
{% from "components/character-count/_macro.character-count.njk" import componentCharacterCount %}

{{ componentCharacterCount({
  "name": "more-detail-b",
  "id": "more-detail-b",
  "maxlength": 250,
  "disabled": true,
  "label": {
    "text": "Esto es un label"
  }
}) }}

Con pista

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

<!-- character-count -->
<div data-maxlength="250">
  <!-- textarea -->
  <div class="c-form-group mb-0">
    <!-- label -->
    <label class="block" for="with-hint">Esto es un label</label>
    <!-- /label -->
    <!-- hint -->
    <p id="with-hint-hint" class="block text-neutral-dark">Esto es una pista.</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 js-character-count" id="with-hint" name="with-hint" rows="5" aria-describedby="with-hint-info with-hint-hint"></textarea>
  </div>
  <!-- /textarea -->
  <!-- hint -->
  <p id="with-hint-info" class="block text-neutral-dark mt-xs text-sm" aria-live="polite">Puedes escribir hasta 250 caracteres</p>
  <!-- /hint -->
</div>
<!-- /character-count -->

Ejemplo: "Con pista", de código Nunjucks, para maquetar el componente: "Character Count", versión: 13.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({
  "name": "with-hint",
  "id": "with-hint",
  "maxlength": 250,
  "label": {
    "text": "Esto es un label"
  },
  "hint": {
    "text": "Esto es una pista."
  }
}) }}

Esto es una pista.

Puedes escribir hasta 250 caracteres

Mostrar códigodel ejemplo: Con pista

Contenido

Nunjucks macro
{% from "components/character-count/_macro.character-count.njk" import componentCharacterCount %}

{{ componentCharacterCount({
  "name": "with-hint",
  "id": "with-hint",
  "maxlength": 250,
  "label": {
    "text": "Esto es un label"
  },
  "hint": {
    "text": "Esto es una pista."
  }
}) }}

Con valor por defecto

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

<!-- character-count -->
<div data-maxlength="100">
  <!-- textarea -->
  <div class="c-form-group mb-0">
    <!-- label -->
    <label class="block" for="with-default-value">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 js-character-count" id="with-default-value" name="default-value" rows="5" aria-describedby="with-default-value-info">Paseo María Agustín, 36,
   50004 Zaragoza
  </textarea>
  </div>
  <!-- /textarea -->
  <!-- hint -->
  <p id="with-default-value-info" class="block text-neutral-dark mt-xs text-sm" aria-live="polite">Puedes escribir hasta 100 caracteres</p>
  <!-- /hint -->
</div>
<!-- /character-count -->

Ejemplo: "Con valor por defecto", de código Nunjucks, para maquetar el componente: "Character Count", versión: 13.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": "with-default-value",
  "name": "default-value",
  "maxlength": 100,
  "label": {
    "text": "Dirección completa"
  },
  "value": "Paseo María Agustín, 36,\n 50004 Zaragoza\n"
}) }}

Puedes escribir hasta 100 caracteres

Mostrar códigodel ejemplo: Con valor por defecto

Contenido

Nunjucks macro
{% from "components/character-count/_macro.character-count.njk" import componentCharacterCount %}

{{ componentCharacterCount({
  "id": "with-default-value",
  "name": "default-value",
  "maxlength": 100,
  "label": {
    "text": "Dirección completa"
  },
  "value": "Paseo María Agustín, 36,\n 50004 Zaragoza\n"
}) }}

Con valor por defecto excediendo el límite

Por accesibilidad, los mensajes de error deben incluir la palabra "error", para que no recaiga tan sólo en el color el hecho de que es un mensaje de error.

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

<!-- character-count -->
<div data-maxlength="250">
  <!-- textarea -->
  <div class="c-form-group c-form-group--error mb-0">
    <!-- label -->
    <label class="block" for="exceeding-characters">Dirección completa</label>
    <!-- /label -->
    <!-- error-message -->
    <p id="exceeding-characters-error" class="block font-semibold text-alert-base">
      <span class="sr-only">Error:</span>Por favor, no exceder el límite máximo. Error en el campo.
    </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 js-character-count border-alert-base ring-2 ring-alert-base border-alert-base ring-2 ring-alert-base " id="exceeding-characters" name="exceeding" rows="5" aria-describedby="exceeding-characters-info" aria-errormessage="exceeding-characters-error" aria-invalid="true">Paseo María Agustín, 36,
   50004 Zaragoza
  </textarea>
  </div>
  <!-- /textarea -->
  <!-- hint -->
  <p id="exceeding-characters-info" class="block text-neutral-dark mt-xs text-sm" aria-live="polite">Puedes escribir hasta 250 caracteres</p>
  <!-- /hint -->
</div>
<!-- /character-count -->

Ejemplo: "Con valor por defecto excediendo el límite", de código Nunjucks, para maquetar el componente: "Character Count", versión: 13.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": "Por favor, no exceder el límite máximo. Error en el campo."
  }
}) }}

Error:Por favor, no exceder el límite máximo. Error en el campo.

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": "Por favor, no exceder el límite máximo. Error en el campo."
  }
}) }}

Con número de filas (rows) personalizada

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

<!-- character-count -->
<div data-maxlength="250">
  <!-- textarea -->
  <div class="c-form-group mb-0">
    <!-- label -->
    <label class="block" for="custom-rows">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 js-character-count" id="custom-rows" name="custom" rows="8" aria-describedby="custom-rows-info"></textarea>
  </div>
  <!-- /textarea -->
  <!-- hint -->
  <p id="custom-rows-info" class="block text-neutral-dark mt-xs text-sm" aria-live="polite">Puedes escribir hasta 250 caracteres</p>
  <!-- /hint -->
</div>
<!-- /character-count -->

Ejemplo: "Con número de filas (rows) personalizada", de código Nunjucks, para maquetar el componente: "Character Count", versión: 13.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": "custom-rows",
  "name": "custom",
  "maxlength": 250,
  "label": {
    "text": "Dirección completa"
  },
  "rows": 8
}) }}

Puedes escribir hasta 250 caracteres

Mostrar códigodel ejemplo: Con número de filas (rows) personalizada

Contenido

Nunjucks macro
{% from "components/character-count/_macro.character-count.njk" import componentCharacterCount %}

{{ componentCharacterCount({
  "id": "custom-rows",
  "name": "custom",
  "maxlength": 250,
  "label": {
    "text": "Dirección completa"
  },
  "rows": 8
}) }}

Con contador de palabras

Ejemplo: "Con contador de palabras", de código HTML, para maquetar el componente: "Character Count", versión: 13.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>.

<!-- character-count -->
<div data-maxwords="10">
  <!-- textarea -->
  <div class="c-form-group mb-0">
    <!-- label -->
    <label class="block" for="word-count">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 js-character-count" id="word-count" name="word-count" rows="5" aria-describedby="word-count-info"></textarea>
  </div>
  <!-- /textarea -->
  <!-- hint -->
  <p id="word-count-info" class="block text-neutral-dark mt-xs text-sm" aria-live="polite">Puedes escribir hasta 10 palabras</p>
  <!-- /hint -->
</div>
<!-- /character-count -->

Ejemplo: "Con contador de palabras", de código Nunjucks, para maquetar el componente: "Character Count", versión: 13.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": "word-count",
  "name": "word-count",
  "maxwords": 10,
  "label": {
    "text": "Dirección completa"
  }
}) }}

Puedes escribir hasta 10 palabras

Mostrar códigodel ejemplo: Con contador de palabras

Contenido

Nunjucks macro
{% from "components/character-count/_macro.character-count.njk" import componentCharacterCount %}

{{ componentCharacterCount({
  "id": "word-count",
  "name": "word-count",
  "maxwords": 10,
  "label": {
    "text": "Dirección completa"
  }
}) }}

Con threshold

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

<!-- character-count -->
<div data-maxlength="250" data-threshold="75">
  <!-- textarea -->
  <div class="c-form-group mb-0">
    <!-- label -->
    <label class="block" for="with-threshold">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 js-character-count" id="with-threshold" name="with-threshold" rows="5" aria-describedby="with-threshold-info"></textarea>
  </div>
  <!-- /textarea -->
  <!-- hint -->
  <p id="with-threshold-info" class="block text-neutral-dark mt-xs text-sm" aria-live="polite">Puedes escribir hasta 250 caracteres</p>
  <!-- /hint -->
</div>
<!-- /character-count -->

Ejemplo: "Con threshold", de código Nunjucks, para maquetar el componente: "Character Count", versión: 13.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": "with-threshold",
  "name": "with-threshold",
  "maxlength": 250,
  "threshold": 75,
  "label": {
    "text": "Dirección completa"
  }
}) }}

Puedes escribir hasta 250 caracteres

Mostrar códigodel ejemplo: Con threshold

Contenido

Nunjucks macro
{% from "components/character-count/_macro.character-count.njk" import componentCharacterCount %}

{{ componentCharacterCount({
  "id": "with-threshold",
  "name": "with-threshold",
  "maxlength": 250,
  "threshold": 75,
  "label": {
    "text": "Dirección completa"
  }
}) }}

Con clases de css aplicadas

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

<!-- character-count -->
<div data-maxlength="250">
  <!-- textarea -->
  <div class="c-form-group c-form-group--error lg:flex lg:flex-wrap lg:items-start lg:gap-x-base mb-0">
    <!-- label -->
    <label class="block lg:py-sm lg:mt-sm" for="classes-applied-b">Inline label:</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>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 js-character-count border-alert-base ring-2 ring-alert-base lg:flex-1 border-alert-base ring-2 ring-alert-base " id="classes-applied-b" name="classes-applied-b" rows="5" aria-describedby="classes-applied-b-info" aria-errormessage="classes-applied-b-error" aria-invalid="true"></textarea>
  </div>
  <!-- /textarea -->
  <!-- hint -->
  <p id="classes-applied-b-info" class="block text-neutral-dark mt-xs text-sm" aria-live="polite">Puedes escribir hasta 250 caracteres</p>
  <!-- /hint -->
</div>
<!-- /character-count -->

Ejemplo: "Con clases de css aplicadas", de código Nunjucks, para maquetar el componente: "Character Count", versión: 13.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({
  "formGroup": {
    "classes": "lg:flex lg:flex-wrap lg:items-start lg:gap-x-base mb-0"
  },
  "label": {
    "text": "Inline label:",
    "classes": "lg:py-sm lg:mt-sm"
  },
  "id": "classes-applied-b",
  "name": "classes-applied-b",
  "maxlength": 250,
  "errorMessage": {
    "text": "Esto es un mensaje de error",
    "classes": "order-1 w-full pt-sm"
  },
  "classes": "lg:flex-1"
}) }}

Error:Esto es un mensaje de error

Puedes escribir hasta 250 caracteres

Mostrar códigodel ejemplo: Con clases de css aplicadas

Contenido

Nunjucks macro
{% from "components/character-count/_macro.character-count.njk" import componentCharacterCount %}

{{ componentCharacterCount({
  "formGroup": {
    "classes": "lg:flex lg:flex-wrap lg:items-start lg:gap-x-base mb-0"
  },
  "label": {
    "text": "Inline label:",
    "classes": "lg:py-sm lg:mt-sm"
  },
  "id": "classes-applied-b",
  "name": "classes-applied-b",
  "maxlength": 250,
  "errorMessage": {
    "text": "Esto es un mensaje de error",
    "classes": "order-1 w-full pt-sm"
  },
  "classes": "lg:flex-1"
}) }}