Todos los componentes (204)

Lista de archivos

Datos · FileList · .amset-files

Qué es y cuándo usarlo

Los adjuntos de algo (un pedido, una factura, un ticket): cada archivo con su tipo escrito, su tamaño, cuándo se subió, y los botones de descargar y quitar. Lo que se está subiendo lleva su barra; lo que falló, el motivo y un botón de reintentar.

Cuándo usarlo

Debajo de un FileUpload, para lo que ya se ha subido o se está subiendo.
En la ficha de un pedido o de un cliente, para sus documentos.
url en un archivo para poder descargarlo; progress (de 0 a 100) mientras sube; error con el motivo si falló.
onRemove recibe la clave y es quien lo usa el que saca el archivo de files; onRetry, lo mismo para volver a subirlo. Sin archivos, sale el texto de empty.

Cuándo no

Para elegir o soltar los archivos: FileUpload.
Para una galería de fotos que se miran: Gallery.

Teclado: Tab recorre los enlaces de descargar y los botones de reintentar y quitar; Intro los pulsa. Al quitar un archivo el foco pasa a la lista, no se cae al principio de la página.

Accesibilidad: es una región con nombre (label). El tipo va escrito en la ficha (PDF, XLSX), no fiado a un icono de colores. Cada botón dice de qué archivo es («Quitar factura-F-2026-0042.pdf», «Descargar …»): diez «Quitar» seguidos no dicen cuál es cuál. Al quitar se anuncia cuántos quedan («albaran-proveedor.xlsx quitado. Quedan 3 archivos»). La subida lleva una barra de progreso con nombre y el estado va escrito («Subiendo, 45 %», «No se ha podido subir: pasa de 20 MB»).

Aspecto fino: variables CSS --amset-files-*: -brand-font, -brand-height, -brand-width, -detail, -gap, -name, -padding, -radius. El tamaño mueve el relleno, la ficha del tipo y los cuerpos de letra.

Cómo se ve

contrato.pdf180 kB
planos.dwg2,0 MB

<FileList
  label="Adjuntos"
  files={[
    { key: 'f1', name: 'contrato.pdf', size: 184320 },
    { key: 'f2', name: 'planos.dwg', size: 2097152 },
  ]}
/>

Props

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

Prop	Tipo	Para qué sirve
`files`obligatoria	`readonly FileListItem[]`	—
`label`obligatoria	`string`	De que son estos archivos. Obligatoria: nombra la lista.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`empty`	`string`	—
`onRemove`	`(key: string) => void`	—
`onRetry`	`(key: string) => void`	—
`size`	`"sm" \| "md" \| "lg"`	—

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-files-padding`	`var(--amset-space-3)`
`--amset-files-gap`	`var(--amset-space-3)`
`--amset-files-brand-width`	`2.5rem`
`--amset-files-brand-height`	`2.75rem`
`--amset-files-brand-font`	`0.625rem`
`--amset-files-name`	`var(--amset-text-sm)`
`--amset-files-detail`	`var(--amset-text-xs)`
`--amset-files-radius`	`var(--amset-radius)`

Cómo se cambia

.amset-files {
  --amset-files-padding: ...;
  --amset-files-gap: ...;
}

En el banco de pruebas

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