Todos los componentes (204)

Grupo de filtros

Elección · FilterGroup · .amset-facets

Qué es y cuándo usarlo

Un grupo de facetas de la columna de filtros de una tienda: casillas con su contador («Oro blanco (18)»), «Ver las 3 restantes» cuando son muchas, un buscador para las listas largas y «Limpiar» en cuanto hay algo marcado.

Cuándo usarlo

Filtros de catálogo que se suman: metal, colección, talla, marca.
maxVisible (6 por defecto) corta la lista; el botón dice cuántas faltan, no un «Ver más» a secas. Lo marcado no se esconde nunca: una opción marcada más allá del máximo se queda a la vista al plegar, y no cuenta entre las que faltan.
search cuando hay muchas opciones: filtra sin distinguir tildes ni mayúsculas y, si no queda nada, dice «Nada coincide».
count es solo el contador: una opción con 0 no se deshabilita sola, eso lo decide su disabled.
withClear={false} quita «Limpiar» cuando el grupo no lo necesita.

Cuándo no

El precio, o cualquier rango de números: RangeFilter.
Una sola opción entre varias: RadioGroup, o SegmentedGroup si se aplica al momento.
Enseñar los filtros ya puestos para quitarlos de uno en uno: AppliedFilters.

Teclado: cada casilla es una parada del Tab y Espacio la marca y la desmarca. El buscador, «Limpiar» y «Ver las N restantes» son un campo y botones normales.

Accesibilidad: es un grupo de casillas de verdad que se llama como el title, así que el lector de pantalla dice «Metal, grupo» al entrar. El contador va dentro del nombre de cada casilla («Oro blanco (18)»), no suelto al lado, donde se quedaría por el camino. El buscador se llama «Buscar en metal».

Estados y movimiento: cada casilla trae sus estados (hover, foco, marcada, deshabilitada); el contador de una deshabilitada pasa al gris de deshabilitado con el resto. Lo que aparece (las casillas al desplegar o al buscar, «Limpiar», «Nada coincide») entra con un fundido corto; lo que ya estaba no se mueve. La cabecera mide lo que el botón «Limpiar», así que no salta al marcar la primera. disabled apaga las casillas y «Limpiar» a la vez (mientras llegan los resultados, por ejemplo); buscar y «Ver más» siguen funcionando, que mirar no cambia ningún filtro.

Tamaños: sm, md (por defecto) y lg van a las casillas, al buscador y al título; «Limpiar» y «Ver más» van un escalón por debajo (sm, sm y md).

Aspecto fino: variables CSS en .amset-facets: --amset-facets-title (la letra del título, y la de «Nada coincide»), --amset-facets-slot (entre casillas), --amset-facets-header (el alto de la cabecera) y --amset-facets-count (el color del contador). Cada casilla se ajusta con las --amset-checkbox-*.

Cómo se ve

<FilterGroup
  title="Talla"
  options={[{ key: 's', label: 'S', count: 12 }]}
  value={elegidas}
  onChange={setElegidas}
/>

Props

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

Prop	Tipo	Para qué sirve
`onChange`obligatoria	`(keys: readonly string[]) => void`	—
`options`obligatoria	`readonly FacetOption[]`	—
`title`obligatoria	`string`	Titulo del grupo: «Marca», «Talla», «Precio». Es lo que nombra el grupo.
`value`obligatoria	`readonly string[]`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`disabled`	`boolean`	Nada se marca ni se limpia (mientras llegan los resultados, por ejemplo). Buscar y «Ver más» siguen funcionando: mirar el resto no cambia ningun filtro.
`maxVisible`	`number`	Cuantas se ven antes del «Ver más». Por defecto 6. Lo marcado se ve siempre.
`search`	`boolean`	Campo de busqueda cuando hay muchas opciones.
`size`	`"sm" \| "md" \| "lg"`	Casillas, buscador, titulo y botones a la vez: `sm`, `md` (por defecto) o `lg`. Los botones de «Limpiar» y «Ver más» van un escalon por debajo.
`withClear`	`boolean`	Boton de limpiar este grupo. Aparece solo cuando hay algo marcado.

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-facets-title`	`var(--amset-text-sm)`
`--amset-facets-slot`	`var(--amset-space-2)`
`--amset-facets-header`	`var(--amset-height-control-sm)`
`--amset-facets-count`	`var(--amset-ink-3)`

Cómo se cambia

.amset-facets {
  --amset-facets-title: ...;
  --amset-facets-slot: ...;
}

En el banco de pruebas

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