Todos los componentes (204)

Visor de imagen

IA · ImageViewer

Qué es y cuándo usarlo

El visor de una imagen a pantalla casi completa: la imagen entera, el nombre y los datos arriba y «Descargar» abajo. Es lo que se abre al pulsar la miniatura de un adjunto o de un artefacto.

Cuándo usarlo

Para ver en grande la imagen que un asistente ha generado o que alguien ha adjuntado a un mensaje.
Detrás de onView de ArtifactCard, onPreview de Attachment o onPress de Thumbnail.

Cuándo no

Para una galería con varias imágenes y flechas: es otra pieza.
Para enseñar un documento o un PDF: es una vista previa dentro de ArtifactCard.

Teclado: es un diálogo de verdad. El foco entra al abrir y vuelve a quien lo abrió al cerrar; Escape y pulsar fuera lo cierran, y dentro de otro diálogo cierra solo el visor. Pulsar la imagen (es un botón, Tab llega a ella) alterna entre ajustada a la ventana y tamaño real con desplazamiento.

Accesibilidad: el título es el nombre del fichero y los datos son la descripción del diálogo. La imagen lleva su alt. Si no se puede cargar, se dice como alerta.

Aspecto fino: variable CSS --amset-image-viewer-bg (el fondo del escenario).

Cómo se ve

asistente.webp

<Thumbnail
  src="/asistente.webp"
  alt="El asistente de AMSET en espera, con la esfera en el centro"
  pressLabel="Ver la captura en grande"
  onPress={() => setAbierto(true)}
/>
<ImageViewer
  src="/asistente.webp"
  alt="El asistente de AMSET en espera, con la esfera en el centro"
  name="asistente.webp"
  details="53 KB · 1440 × 900"
  open={abierto}
  onOpenChange={setAbierto}
  onDownload={descargar}
/>

Props

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

Prop	Tipo	Para qué sirve
`alt`obligatoria	`string`	Que se ve en la imagen, para quien no la ve.
`onOpenChange`obligatoria	`(open: boolean) => void`	—
`open`obligatoria	`boolean`	—
`src`obligatoria	`string`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`details`	`ReactNode`	Una linea de datos bajo el titulo: «1,5 MB · 1920 × 1080». Se lee como descripcion del visor.
`name`	`string`	El titulo del visor: el nombre del fichero. Por defecto, `alt`.
`onDownload`	`() => void`	Con esto aparece «Descargar» en el pie.

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

En el banco de pruebas

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