desy-html

Character-count

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

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}

Por defecto

Ejemplo: "Por defecto", de código HTML, para maquetar el componente: "Character Count", versión: 12.1.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: 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: 12.1.0, 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: 12.1.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: 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="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="placeholder" name="con-placeholder" rows="5" aria-describedby="placeholder-info" placeholder="Esto es un placeholder"></textarea>
  </div>
  <!-- /textarea -->
  <!-- hint -->
  <p id="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: 12.1.0, 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": "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": "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: 12.1.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: 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: 12.1.0, 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: 12.1.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: 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: 12.1.0, 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: 12.1.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: 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: 12.1.0, 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

Ejemplo: "Con valor por defecto excediendo el límite", de código HTML, para maquetar el componente: "Character Count", versión: 12.1.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: 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>Error: Por favor, no exceder el límite máximo
    </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 exceeding-characters-error" 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: 12.1.0, 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"
  }
}) }}

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: 12.1.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: 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: 12.1.0, 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 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', por defecto usará un <h1>.

Ejemplo: "Con label como encabezado", de código HTML, para maquetar el componente: "Character Count", versión: 12.1.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: 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 -->
    <h1 class="block ">
      <label class="block" for="textarea-with-page-heading">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 js-character-count" id="textarea-with-page-heading" name="address" rows="5" aria-describedby="textarea-with-page-heading-info"></textarea>
  </div>
  <!-- /textarea -->
  <!-- hint -->
  <p id="textarea-with-page-heading-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 label como encabezado", de código Nunjucks, para maquetar el componente: "Character Count", versión: 12.1.0, 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": "textarea-with-page-heading",
  "name": "address",
  "maxlength": 250,
  "label": {
    "text": "Esto es un label dentro de un encabezado <h1>",
    "isPageHeading": true
  }
}) }}

Puedes escribir hasta 250 caracteres

Mostrar códigodel ejemplo: Con label como encabezado

Contenido

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

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

Con contador de palabras

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

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": "Error: Esto es un mensaje de error",
    "classes": "order-1 w-full pt-sm"
  },
  "classes": "lg:flex-1"
}) }}