Todos los componentes (204)

Comparador de imágenes

Comercio · ImageCompare · .amset-compare

Qué es y cuándo usarlo

Antes y después: dos imágenes del mismo encuadre, una encima de otra, y un separador que se arrastra para ver más de una o de otra.

Cuándo usarlo

Un arreglo, una limpieza, una restauración o un rediseño: la joya antes y después de pulirla, la ficha vieja y la nueva.
Lo viejo queda a la izquierda y lo nuevo a la derecha. El valor (value y onChange, o initialPosition sin controlarlo), de 0 a 100, es cuánto se ve de la imagen de before: en 0 solo está la nueva; en 100, solo la vieja.
beforeLabel y afterLabel cambian los rótulos de las esquinas; beforeLabel entra además en el nombre del separador.
ratio fija la forma de la caja, en formato CSS (16 / 9 por defecto): las dos imágenes la llenan recortándose, sin deformarse.

Cuándo no

Fotos distintas de un mismo producto: Gallery.
Elegir un número de un intervalo: Slider.

Teclado: Tab llega al tirador. Las flechas lo mueven de uno en uno, Re Pág y Av Pág de diez en diez, e Inicio y Fin lo llevan a los extremos.

Accesibilidad: el separador es un <input type="range"> de verdad, escondido bajo el tirador que se ve. Al moverse anuncia el tanto por ciento, y su nombre dice de qué es: «Comparar el anillo antes y después de pulirlo. Parte visible de Antes». Las dos imágenes llevan su alt (obligatorio) y las dos están en el DOM: la comparación es la información. Los rótulos de las esquinas son solo visuales (aria-hidden).

Contexto: va dentro de LocaleProvider (o de AmsetProvider), que escribe el tanto por ciento («52 %»).

Aspecto fino: variables CSS --amset-compare-*: -caption, -line, -radius, -thumb, -thumb-icon. El tamaño mueve el tirador, su icono, la raya y el rotulo.

Cómo se ve

Antes y despues. Parte visible de Antes

<ImageCompare
  label="Antes y despues"
  before={{ src: '/antes.jpg', alt: 'Antes' }}
  after={{ src: '/despues.jpg', alt: 'Despues' }}
/>

Props

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

Prop	Tipo	Para qué sirve
`after`obligatoria	`ComparedImage`	—
`before`obligatoria	`ComparedImage`	—
`label`obligatoria	`string`	De que es la comparacion. Obligatoria: nombra el separador.
`afterLabel`	`string`	Nombre del lado de despues. Solo sale en su rotulo, que es decorativo: al lector le llega por el `alt` de la imagen, no por el separador.
`beforeLabel`	`string`	Nombre del lado de antes. Sale en su rotulo y entra en el nombre del separador («Parte visible de Antes»), porque el valor mide cuanto se ve de esta imagen. Lo que se lee al moverse es solo el porcentaje.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`initialPosition`	`number`	—
`onChange`	`(position: number) => void`	—
`ratio`	`string`	Proporcion de la caja, en formato CSS.
`size`	`"sm" \| "md" \| "lg"`	—
`value`	`number`	—

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-compare-radius`	`var(--amset-radius)`
`--amset-compare-caption`	`var(--amset-text-xs)`
`--amset-compare-line`	`2px`
`--amset-compare-thumb`	`2.25rem`
`--amset-compare-thumb-icon`	`1.125rem`

Cómo se cambia

.amset-compare {
  --amset-compare-radius: ...;
  --amset-compare-caption: ...;
}

En el banco de pruebas

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