desy-html

File-upload

Parámetros Nunjucks del componente: "File-upload". 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: name\n  type: string\n  required: true\n  description: The name of the input, which is submitted with the form data.\n- name: id\n  type: string\n  required: true\n  description: The id of the input\n- name: value\n  type: string\n  required: false\n  description: Optional initial value of the input\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 file upload component.\n- name: attributes\n  type: object\n  required: false\n  description: HTML attributes (for example data attributes) to add to the file upload component.","length":1516}

Por defecto

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

<!-- file-upload -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="file-upload-1">Sube un archivo</label>
  <!-- /label -->
  <input class="mt-sm p-xs file:mr-base focus:outline-none file:inline-flex file:items-baseline file:px-3 file:py-2 file:bg-white file:border file:border-solid file:border-primary-base file:rounded file:align-baseline file:font-semibold file:text-primary-base file:transition-all file:duration-100 file:ease-out file:whitespace-nowrap file:cursor-pointer file:focus:bg-warning-base file:focus:border-warning-base file:focus:shadow-outline-black file:focus:text-black file:focus:outline-none file:hover:bg-neutral-light file:hover:border-primary-base file:hover:text-primary-base overflow-x-auto max-w-64 lg:w-full lg:max-w-none" id="file-upload-1" name="file-upload-1" type="file">
</div>
<!-- /file-upload -->

Ejemplo: "Por defecto", de código Nunjucks, para maquetar el componente: "File Upload", 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/file-upload/_macro.file-upload.njk" import componentFileUpload %}

{{ componentFileUpload({
  "id": "file-upload-1",
  "name": "file-upload-1",
  "label": {
    "text": "Sube un archivo"
  },
  "classes": "overflow-x-auto max-w-64 lg:w-full lg:max-w-none"
}) }}
Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro
{% from "components/file-upload/_macro.file-upload.njk" import componentFileUpload %}

{{ componentFileUpload({
  "id": "file-upload-1",
  "name": "file-upload-1",
  "label": {
    "text": "Sube un archivo"
  },
  "classes": "overflow-x-auto max-w-64 lg:w-full lg:max-w-none"
}) }}

Con pista

Ejemplo: "Con pista", de código HTML, para maquetar el componente: "File Upload", 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>.

<!-- file-upload -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="file-upload-2">Sube una foto</label>
  <!-- /label -->
  <!-- hint -->
  <p id="file-upload-2-hint" class="block text-neutral-dark">Formato de imágenes admitidas: jpg, jpeg, png, gif. Tamaño de archivo máximo admitido: 10 Mb.</p>
  <!-- /hint -->
  <input class="mt-sm p-xs file:mr-base focus:outline-none file:inline-flex file:items-baseline file:px-3 file:py-2 file:bg-white file:border file:border-solid file:border-primary-base file:rounded file:align-baseline file:font-semibold file:text-primary-base file:transition-all file:duration-100 file:ease-out file:whitespace-nowrap file:cursor-pointer file:focus:bg-warning-base file:focus:border-warning-base file:focus:shadow-outline-black file:focus:text-black file:focus:outline-none file:hover:bg-neutral-light file:hover:border-primary-base file:hover:text-primary-base overflow-x-auto max-w-64 lg:w-full lg:max-w-none" id="file-upload-2" name="file-upload-2" type="file" aria-describedby="file-upload-2-hint">
</div>
<!-- /file-upload -->

Ejemplo: "Con pista", de código Nunjucks, para maquetar el componente: "File Upload", 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/file-upload/_macro.file-upload.njk" import componentFileUpload %}

{{ componentFileUpload({
  "id": "file-upload-2",
  "name": "file-upload-2",
  "label": {
    "text": "Sube una foto"
  },
  "hint": {
    "text": "Formato de imágenes admitidas: jpg, jpeg, png, gif. Tamaño de archivo máximo admitido: 10 Mb."
  },
  "classes": "overflow-x-auto max-w-64 lg:w-full lg:max-w-none"
}) }}

Formato de imágenes admitidas: jpg, jpeg, png, gif. Tamaño de archivo máximo admitido: 10 Mb.

Mostrar códigodel ejemplo: Con pista

Contenido

Nunjucks macro
{% from "components/file-upload/_macro.file-upload.njk" import componentFileUpload %}

{{ componentFileUpload({
  "id": "file-upload-2",
  "name": "file-upload-2",
  "label": {
    "text": "Sube una foto"
  },
  "hint": {
    "text": "Formato de imágenes admitidas: jpg, jpeg, png, gif. Tamaño de archivo máximo admitido: 10 Mb."
  },
  "classes": "overflow-x-auto max-w-64 lg:w-full lg:max-w-none"
}) }}

Con mensaje de error

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 mensaje de error", de código HTML, para maquetar el componente: "File Upload", 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>.

<!-- file-upload -->
<div class="c-form-group c-form-group--error">
  <!-- label -->
  <label class="block" for="file-upload-3">Sube un archivo</label>
  <!-- /label -->
  <!-- hint -->
  <p id="file-upload-3-hint" class="block text-neutral-dark">Formato de imágenes admitidas: jpg, jpeg, png, gif. Tamaño de archivo máximo admitido: 10 Mb.</p>
  <!-- /hint -->
  <!-- error-message -->
  <p id="file-upload-3-error" class="block font-semibold text-alert-base">
    <span class="sr-only">Error:</span>Esto es un mensaje de error
  </p>
  <!-- /error-message -->
  <input class="mt-sm p-xs file:mr-base focus:outline-none file:inline-flex file:items-baseline file:px-3 file:py-2 file:bg-white file:border file:border-solid file:border-primary-base file:rounded file:align-baseline file:font-semibold file:text-primary-base file:transition-all file:duration-100 file:ease-out file:whitespace-nowrap file:cursor-pointer file:focus:bg-warning-base file:focus:border-warning-base file:focus:shadow-outline-black file:focus:text-black file:focus:outline-none file:hover:bg-neutral-light file:hover:border-primary-base file:hover:text-primary-base overflow-x-auto max-w-64 lg:w-full lg:max-w-none c-file-upload--error" id="file-upload-3" name="file-upload-3" type="file" aria-describedby="file-upload-3-hint" aria-errormessage="file-upload-3-error" aria-invalid="true">
</div>
<!-- /file-upload -->

Ejemplo: "Con mensaje de error", de código Nunjucks, para maquetar el componente: "File Upload", 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/file-upload/_macro.file-upload.njk" import componentFileUpload %}

{{ componentFileUpload({
  "id": "file-upload-3",
  "name": "file-upload-3",
  "label": {
    "text": "Sube un archivo"
  },
  "hint": {
    "text": "Formato de imágenes admitidas: jpg, jpeg, png, gif. Tamaño de archivo máximo admitido: 10 Mb."
  },
  "errorMessage": {
    "text": "Esto es un mensaje de error"
  },
  "classes": "overflow-x-auto max-w-64 lg:w-full lg:max-w-none"
}) }}

Formato de imágenes admitidas: jpg, jpeg, png, gif. Tamaño de archivo máximo admitido: 10 Mb.

Error:Esto es un mensaje de error

Mostrar códigodel ejemplo: Con mensaje de error

Contenido

Nunjucks macro
{% from "components/file-upload/_macro.file-upload.njk" import componentFileUpload %}

{{ componentFileUpload({
  "id": "file-upload-3",
  "name": "file-upload-3",
  "label": {
    "text": "Sube un archivo"
  },
  "hint": {
    "text": "Formato de imágenes admitidas: jpg, jpeg, png, gif. Tamaño de archivo máximo admitido: 10 Mb."
  },
  "errorMessage": {
    "text": "Esto es un mensaje de error"
  },
  "classes": "overflow-x-auto max-w-64 lg:w-full lg:max-w-none"
}) }}

Con atributos

Ejemplo: "Con atributos", de código HTML, para maquetar el componente: "File Upload", 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>.

<!-- file-upload -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="file-upload-4">Sube una foto</label>
  <!-- /label -->
  <input class="mt-sm p-xs file:mr-base focus:outline-none file:inline-flex file:items-baseline file:px-3 file:py-2 file:bg-white file:border file:border-solid file:border-primary-base file:rounded file:align-baseline file:font-semibold file:text-primary-base file:transition-all file:duration-100 file:ease-out file:whitespace-nowrap file:cursor-pointer file:focus:bg-warning-base file:focus:border-warning-base file:focus:shadow-outline-black file:focus:text-black file:focus:outline-none file:hover:bg-neutral-light file:hover:border-primary-base file:hover:text-primary-base overflow-x-auto max-w-64 lg:w-full lg:max-w-none" id="file-upload-4" name="file-upload-4" type="file" accept=".jpg, .jpeg, .png">
</div>
<!-- /file-upload -->

Ejemplo: "Con atributos", de código Nunjucks, para maquetar el componente: "File Upload", 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/file-upload/_macro.file-upload.njk" import componentFileUpload %}

{{ componentFileUpload({
  "id": "file-upload-4",
  "name": "file-upload-4",
  "label": {
    "text": "Sube una foto"
  },
  "attributes": {
    "accept": ".jpg, .jpeg, .png"
  },
  "classes": "overflow-x-auto max-w-64 lg:w-full lg:max-w-none"
}) }}
Mostrar códigodel ejemplo: Con atributos

Contenido

Nunjucks macro
{% from "components/file-upload/_macro.file-upload.njk" import componentFileUpload %}

{{ componentFileUpload({
  "id": "file-upload-4",
  "name": "file-upload-4",
  "label": {
    "text": "Sube una foto"
  },
  "attributes": {
    "accept": ".jpg, .jpeg, .png"
  },
  "classes": "overflow-x-auto max-w-64 lg:w-full lg:max-w-none"
}) }}

Con clases de form-group opcionales

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

<!-- file-upload -->
<div class="c-form-group p-base bg-warning-light">
  <!-- label -->
  <label class="block" for="file-upload-6">Sube un archivo</label>
  <!-- /label -->
  <input class="mt-sm p-xs file:mr-base focus:outline-none file:inline-flex file:items-baseline file:px-3 file:py-2 file:bg-white file:border file:border-solid file:border-primary-base file:rounded file:align-baseline file:font-semibold file:text-primary-base file:transition-all file:duration-100 file:ease-out file:whitespace-nowrap file:cursor-pointer file:focus:bg-warning-base file:focus:border-warning-base file:focus:shadow-outline-black file:focus:text-black file:focus:outline-none file:hover:bg-neutral-light file:hover:border-primary-base file:hover:text-primary-base overflow-x-auto max-w-64 lg:w-full lg:max-w-none" id="file-upload-6" name="file-upload-6" type="file">
</div>
<!-- /file-upload -->

Ejemplo: "Con clases de form-group opcionales", de código Nunjucks, para maquetar el componente: "File Upload", 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/file-upload/_macro.file-upload.njk" import componentFileUpload %}

{{ componentFileUpload({
  "id": "file-upload-6",
  "name": "file-upload-6",
  "label": {
    "text": "Sube un archivo"
  },
  "classes": "overflow-x-auto max-w-64 lg:w-full lg:max-w-none",
  "formGroup": {
    "classes": "p-base bg-warning-light"
  }
}) }}
Mostrar códigodel ejemplo: Con clases de form-group opcionales

Contenido

Nunjucks macro
{% from "components/file-upload/_macro.file-upload.njk" import componentFileUpload %}

{{ componentFileUpload({
  "id": "file-upload-6",
  "name": "file-upload-6",
  "label": {
    "text": "Sube un archivo"
  },
  "classes": "overflow-x-auto max-w-64 lg:w-full lg:max-w-none",
  "formGroup": {
    "classes": "p-base bg-warning-light"
  }
}) }}