Todos los componentes (244)

Biblioteca multimedia

Gestión · MediaManager · .amset-media

Qué es y cuándo usarlo

Una biblioteca multimedia: buscar, filtrar por tipo, subir, elegir y, del elegido, editar sus datos, recortarlo y borrarlo.

Cuándo usarlo

Las fotos de una tienda, las imágenes de un blog o el material de una campaña, y el selector de «elige una imagen» de un editor.
items son los elementos, con su tipo, su original, su miniatura y sus datos; selection="multiple" deja elegir varios y onChoose los usa.
onUpdate guarda el título, el texto alternativo, el pie y las etiquetas; onCrop recibe el recorte de una imagen en píxeles de la original; onDelete borra con confirmación. Sin su función, la acción no sale.
Las imágenes sin texto alternativo se marcan en la cuadrícula, para que no se publiquen así.

Cuándo no

Una carpeta de documentos con subcarpetas: FileManager. Solo recortar: ImageCropper.
Dónde se guardan los ficheros, sus versiones y quién puede tocarlos son cosa de la aplicación.

Teclado: cada elemento es un botón que se elige con Intro o Espacio; el panel de detalles es un formulario normal y el recorte va en un diálogo.

Accesibilidad: es una región con nombre; cada elemento dice si está elegido (aria-pressed), el panel lleva el nombre del elemento y guardar, recortar, borrar y subir se anuncian.

Aspecto fino: --amset-media-tile (ancho mínimo de una miniatura), --amset-media-panel (ancho del panel) y --amset-media-radius.

Cómo se ve

Elige un elemento para ver sus detalles.

Ninguna imagen elegida.

<MediaManager
  label="Imágenes de la tienda"
  items={medios}
  selection="multiple"
  onChoose={usarEnLaFicha}
  onUpdate={guardarDetalles}
  onDelete={borrar}
/>

Props

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

Prop	Tipo	Para qué sirve
`items`obligatoria	`readonly MediaItem[]`	—
`label`obligatoria	`string`	Que biblioteca es («Imágenes de la tienda»). Obligatorio.
`accept`	`string`	Los tipos que se aceptan al subir, como el `accept` de un `<input type="file">`. Por defecto, imagen, video, audio y PDF.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`hasMore`	`boolean`	Hay mas elementos en el servidor que los de `items`: con esto y `onLoadMore` sale el boton «Cargar más».
`loading`	`boolean`	—
`onChoose`	`(items: readonly MediaItem[]) => void`	Usar lo elegido (insertarlo en una pagina, ponerlo de portada). Sin esto no sale el boton.
`onCrop`	`(id: string, rect: CropRect) => void \| Promise<void>`	Recortar una imagen: el recorte llega en pixeles de la original; recortarla de verdad es cosa de la aplicacion.
`onDelete`	`(id: string) => void \| Promise<void>`	—
`onLoadMore`	`() => void \| Promise<void>`	—
`onUpdate`	`(id: string, details: MediaDetails) => void \| Promise<void>`	—
`onUpload`	`(files: readonly File[], onProgress: ReportProgress) => void \| Promise<void>`	Subir ficheros, con el boton o soltandolos encima. Para la barra de avance, llama a `onProgress` con un valor de 0 a 100.
`selection`	`"multiple" \| "single"`	Elegir uno o varios. Por defecto, uno.

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-media-tile`	`9rem`
`--amset-media-panel`	`20rem`
`--amset-media-radius`	`var(--amset-radius-lg)`

Cómo se cambia

.amset-media {
  --amset-media-tile: ...;
  --amset-media-panel: ...;
}

En el banco de pruebas

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