desy-html

File-upload

Parámetros Nunjucks del componente: "File-upload". Versión: 12.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: 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: 12.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: 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: 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: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: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: 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: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:max-w-none"
}) }}

Con pista

Ejemplo: "Con pista", de código HTML, para maquetar el componente: "File Upload", versión: 12.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: 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: 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">Tu foto puede estar en tus Imágenes, Fotos, Descargas o el Escritorio. O en una aplicación como Fotos.</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: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: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: 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": "Tu foto puede estar en tus Imágenes, Fotos, Descargas o el Escritorio. O en una aplicación como Fotos."
  },
  "classes": "overflow-x-auto max-w-64 lg:max-w-none"
}) }}

Tu foto puede estar en tus Imágenes, Fotos, Descargas o el Escritorio. O en una aplicación como Fotos.

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": "Tu foto puede estar en tus Imágenes, Fotos, Descargas o el Escritorio. O en una aplicación como Fotos."
  },
  "classes": "overflow-x-auto max-w-64 lg:max-w-none"
}) }}

Con mensaje de error

Ejemplo: "Con mensaje de error", de código HTML, para maquetar el componente: "File Upload", versión: 12.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: 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: 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">Tu foto puede estar en tus Imágenes, Fotos, Descargas o el Escritorio. O en una aplicación como Fotos.</p>
  <!-- /hint -->
  <!-- error-message -->
  <p id="file-upload-3-error" class="block font-semibold text-alert-base">
    <span class="sr-only">Error:</span>Error: 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:max-w-none c-file-upload--error" id="file-upload-3" name="file-upload-3" type="file" aria-describedby="file-upload-3-hint file-upload-3-error" 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: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: 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": "Tu foto puede estar en tus Imágenes, Fotos, Descargas o el Escritorio. O en una aplicación como Fotos."
  },
  "errorMessage": {
    "text": "Error: esto es un mensaje de error"
  },
  "classes": "overflow-x-auto max-w-64 lg:max-w-none"
}) }}

Tu foto puede estar en tus Imágenes, Fotos, Descargas o el Escritorio. O en una aplicación como Fotos.

Error: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": "Tu foto puede estar en tus Imágenes, Fotos, Descargas o el Escritorio. O en una aplicación como Fotos."
  },
  "errorMessage": {
    "text": "Error: esto es un mensaje de error"
  },
  "classes": "overflow-x-auto max-w-64 lg:max-w-none"
}) }}

Con atributos

Ejemplo: "Con atributos", de código HTML, para maquetar el componente: "File Upload", versión: 12.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: 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: 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: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: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: 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: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:max-w-none"
}) }}

Con label como encabezado

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

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- file-upload -->
<div class="c-form-group">
  <!-- label -->
  <h1 class="block ">
    <label class="block" for="file-upload-5">Sube un archivo</label>
  </h1>
  <!-- /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:max-w-none" id="file-upload-5" name="file-upload-5" type="file">
</div>
<!-- /file-upload -->

Ejemplo: "Con label como encabezado", de código Nunjucks, para maquetar el componente: "File Upload", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: 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-5",
  "name": "file-upload-5",
  "label": {
    "text": "Sube un archivo",
    "isPageHeading": true
  },
  "classes": "overflow-x-auto max-w-64 lg:max-w-none"
}) }}

Mostrar códigodel ejemplo: Con label como encabezado

Contenido

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

{{ componentFileUpload({
  "id": "file-upload-5",
  "name": "file-upload-5",
  "label": {
    "text": "Sube un archivo",
    "isPageHeading": true
  },
  "classes": "overflow-x-auto max-w-64 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: 12.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: 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: 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: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: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: 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: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:max-w-none",
  "formGroup": {
    "classes": "p-base bg-warning-light"
  }
}) }}