Todos los componentes (204)

Selector de variantes

Elección · VariantPicker · .amset-variants

Qué es y cuándo usarlo

El metal y la talla (o el color y la talla) de un producto, con la disponibilidad mirada cruzada: la talla 14 puede quedar en oro blanco y estar agotada en oro amarillo. Debajo dice cómo está la combinación elegida: «En stock», «Quedan 2 unidades», «Agotado en esta combinación» o «Elige talla».

Cuándo usarlo

En la ficha de un producto con variantes, encima de la cantidad y del botón de añadir al carrito.
Lo agotado se ve tachado, se dice y se puede elegir igual: elegirlo es como se llega a «avísame cuando vuelva».
Lo que existe pero no con lo elegido (el oro rosa no se hace en talla 16) sale apagado y, al elegirlo, suelta la talla y pide elegirla otra vez. Solo desaparece del recorrido lo que no está en ninguna variante.
kind: 'color' en un eje pinta muestras redondas con el color de sample; 'text' (por defecto) pinta botones con la etiqueta.
size: botones de 30, 36 (por defecto) o 44 px de alto, como los controles, y muestras de 24, 32 o 40 px. disabled deja ver lo elegido sin dejar cambiarlo (mientras se carga el producto, por ejemplo).

Cuándo no

Una opción suelta que no depende de otra: RadioGroup, o SegmentedGroup si se aplica al momento.
La cantidad: QuantityPicker, debajo de este.

Teclado: cada eje es un grupo de radio: se entra con Tab y se recorre con las flechas, que mueven y eligen a la vez. Las flechas llegan también a lo agotado y a lo que no casa con lo elegido.

Accesibilidad: cada eje es un radiogroup que se llama con su nombre y lo elegido («Metal: Oro amarillo»). Cada opción dice su estado con palabras («14, agotada en oro amarillo», «Oro rosa, no está en 16»), y las muestras de color se llaman por su color, porque un círculo no se lee en voz alta. La línea de existencias es un role="status": se anuncia al cambiar. El foco es el anillo de 2 px de los botones, por fuera de la opción. Con ratón, nada baja de 24 px; con el dedo, opciones y muestras miden al menos 44 px.

Estados: elegida (borde de acento y relleno suave en los botones; aro en tinta en las muestras), agotada (tachada), sin combinación (borde discontinuo y muestra apagada), deshabilitada (en gris, con la elegida aún marcada) y foco. Lo que no existe en ninguna variante no sale.

Movimiento: bordes, rellenos y aros cambian con una transición corta; la muestra crece al apuntarla y cede al pulsarla, igual que el botón; el texto de existencias entra bajando un poco cada vez que cambia.

Aspecto fino: variables CSS --amset-variants-height, --amset-variants-padding, --amset-variants-font y --amset-variants-radius (los botones), --amset-variants-name (el nombre del eje), --amset-variants-sample (el círculo), --amset-variants-ring y --amset-variants-gap (el aro de la elegida y su hueco), --amset-variants-border, --amset-variants-selected, --amset-variants-selected-background, --amset-variants-selected-ink y --amset-variants-ring-color (colores) y --amset-variants-slot (entre opciones). Las clases de estado son amset-variants__option--soldout, --no-combo y --not-found.

Cómo se ve

<VariantPicker
  axes={ejes}
  variants={variantes}
  value={eleccion}
  onChange={setEleccion}
/>

Props

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

Prop	Tipo	Para qué sirve
`axes`obligatoria	`readonly VariantAxis[]`	—
`onChange`obligatoria	`(selection: Selection) => void`	—
`value`obligatoria	`Readonly<Record<string, string>>`	—
`variants`obligatoria	`readonly ProductVariant[]`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`disabled`	`boolean`	Lo elegido se ve, pero no se puede cambiar: mientras carga el producto.
`size`	`"sm" \| "md" \| "lg"`	Botones de 30, 36 (por defecto) o 44 px de alto y muestras de 24, 32 o 40 px. Con el dedo, nada baja de 44 px.

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-variants-height`	`var(--amset-height-control)`
`--amset-variants-padding`	`var(--amset-space-3)`
`--amset-variants-font`	`var(--amset-text-sm)`
`--amset-variants-name`	`var(--amset-text-sm)`
`--amset-variants-radius`	`var(--amset-radius)`
`--amset-variants-sample`	`2rem`
`--amset-variants-ring`	`2px`
`--amset-variants-gap`	`2px`
`--amset-variants-border`	`var(--amset-border-bold)`
`--amset-variants-selected`	`var(--amset-accent)`
`--amset-variants-selected-background`	`var(--amset-accent-soft)`
`--amset-variants-selected-ink`	`var(--amset-accent-text)`
`--amset-variants-ring-color`	`var(--amset-ink)`
`--amset-variants-slot`	`var(--amset-space-2)`

Cómo se cambia

.amset-variants {
  --amset-variants-height: ...;
  --amset-variants-padding: ...;
}

En el banco de pruebas

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