Todos los componentes (204)

Adjunto

IA · Attachment · .amset-attachment

Qué es y cuándo usarlo

Un fichero adjunto a un mensaje: su miniatura o icono, el nombre, el tamaño y, mientras sube, una barra de progreso de verdad.

Cuándo usarlo

Encima de la caja de un chat, para lo que se va a enviar con el mensaje.
Dentro de un mensaje ya enviado, para los ficheros que llevaba.

Cuándo no

Para una lista de ficheros de un proyecto con descarga y fechas: es una FileList.
Para elegir ficheros: es un FileUpload.

Teclado: quitarlo es un botón y Tab llega a él.

Accesibilidad: el estado -subiendo, subido, con error- se dice con texto, no solo con color; la subida es un <progress> con su nombre y su valor, y un fallo se anuncia como alerta. El botón de quitar lleva el nombre del fichero en su etiqueta («Quitar informe.pdf»). La miniatura es decorativa; con onPreview es un botón con el nombre del fichero («Ver informe.png»). Al terminar una subida se anuncia «Subido». El tamaño se escribe en el idioma («1,5 MB»).

Aspecto fino: variables CSS --amset-attachment-max (ancho máximo) y --amset-attachment-thumb (lado de la miniatura).

Cómo se ve

informe-q3.pdf1,5 MBSubido hace 2 min

extracto-octubre.csv18,4 kBSubiendo, 62 %Subiendo

albaran-1047.pdf1,5 MBNo se pudo subir: el fichero pesa demasiado.

<Attachment name="informe-q3.pdf" size={1500000} status="done" detail="Subido hace 2 min" />
<Attachment name="extracto-octubre.csv" size={18400} status="uploading" progress={62} />
<Attachment
  name="albaran-1047.pdf"
  size={1500000}
  status="error"
  errorText="No se pudo subir: el fichero pesa demasiado."
  onRemove={quitar}
/>

Props

Se importa con import { Attachment } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`name`obligatoria	`string`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`compact`	`boolean`	Mas pequeño, para una barra estrecha: la miniatura de 1,75 rem y el texto en una sola linea.
`detail`	`ReactNode`	Una linea mas junto al tamaño: «Termina en ••4f2a», «3 paginas».
`errorText`	`string`	Que ha pasado, si ha fallado: «Pesa mas de 10 MB». Por defecto, «No se ha subido».
`icon`	`ReactNode`	Un icono propio en lugar del de fichero: una llave para una variable, un enlace. Sin `previewUrl`.
`onPreview`	`() => void`	Con esto la miniatura es un boton -«Ver informe.png»- que abre el visor, el zoom o lo que toque.
`onRemove`	`() => void`	Con esto aparece el boton de quitar.
`previewUrl`	`string`	Una miniatura, si es una imagen. Sin ella sale el icono de fichero.
`progress`	`number`	De 0 a 100, mientras sube. Sin esto, la barra no tiene recuento.
`size`	`number`	En bytes. Se escribe en el idioma: «1,5 MB».
`status`	`AttachmentStatus`	—

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-attachment-max`	`16rem`
`--amset-attachment-thumb`	`2.5rem`

Cómo se cambia

.amset-attachment {
  --amset-attachment-max: ...;
  --amset-attachment-thumb: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: