Todos los componentes (204)

Filtros aplicados

Gestión · AppliedFilters · .amset-filters

Qué es y cuándo usarlo

Las fichas de los filtros que están puestos ahora mismo, encima de una tabla o de una lista. Sirven para dos cosas: que se vea por qué faltan resultados y que se pueda quitar uno sin volver al panel de filtros.

Cuándo usarlo

Encima de una tabla, una lista de pedidos o unos resultados de búsqueda, cada ficha con su campo y su valor (field y value: «Estado: Pendiente de envío»).
Es controlado: onRemove llega con la clave y quien lo usa quita el filtro de verdad.
onClear añade «Limpiar todo» (clearText lo cambia); max resume los que no caben en «+N»; empty dice qué se ve cuando no hay ninguno (por defecto, nada).

Cuándo no

Elegir los filtros: FilterGroup.
Marcas que no se quitan (el estado de un pedido): Tag.
Elegir varias opciones dentro de un campo: MultiSelect.

Teclado: las fichas son una rejilla (role="grid") con una sola parada del Tab: las flechas pasan de una a otra (dando la vuelta en los extremos), Inicio y Fin van a la primera y a la última, y Supr o Retroceso quitan la que tiene el foco, además de su botón. Al quitar una, el foco pasa a la siguiente (o a la anterior, si era la última) en vez de perderse. «Limpiar todo» es un botón aparte, con su propia parada. Al quitar la última o limpiar todo, el foco pasa al texto de empty; sin él, a lo siguiente de la página (o a lo anterior, o al contenedor), nunca al body. Si quien lo usa lleva el foco a otro sitio en onRemove o onClear, se respeta.

Accesibilidad: el grupo se llama como label («Filtros aplicados»), cada ficha se lee entera («Estado: Pendiente de envío») y cada botón de quitar dice una sola vez qué filtro quita («Quitar el filtro Estado: Pendiente de envío»). El «+N» se ve como «+2» y se oye entero, con el plural del idioma: «2 filtros más».

Aspecto fino: variables CSS --amset-filters-*: -chip-padding, -extra, -font, -gap, -radius, -remove, -remove-icon, -target. El tamaño mueve el hueco, el relleno de la pildora y el cuerpo de letra. La equis se VE en -remove y se PULSA en -target: 24 px con raton y el objetivo tactil con el dedo.

Cómo se ve

Color:Azul

Talla:M

Precio:Hasta 50 €

<AppliedFilters
  filters={[{ key: 'color', field: 'Color', value: 'Azul' }]}
  onRemove={quitar}
/>

Props

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

Prop	Tipo	Para qué sirve
`filters`obligatoria	`readonly AppliedFilter[]`	—
`onRemove`obligatoria	`(key: string) => void`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`clearText`	`string`	—
`empty`	`ReactNode`	Qué se ve cuando no hay ninguno. Por defecto, nada. Al vaciar la lista, el foco pasa aquí.
`label`	`string`	Texto de delante: "Filtros:". Va como nombre del grupo.
`max`	`number`	Cuántos se ven antes de resumir en "+N".
`onClear`	`() => void`	Con esto aparece el botón de limpiar todo.
`size`	`"sm" \| "md" \| "lg"`	—

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-filters-gap`	`var(--amset-space-2)`
`--amset-filters-font`	`var(--amset-text-sm)`
`--amset-filters-chip-padding`	`2px var(--amset-space-1) 2px var(--amset-space-2)`
`--amset-filters-radius`	`var(--amset-radius)`
`--amset-filters-remove`	`1.125rem`
`--amset-filters-remove-icon`	`0.625rem`
`--amset-filters-target`	`1.5rem`
`--amset-filters-extra`	`calc((var(--amset-filters-target) - var(--amset-filters-remove)) / 2)`

Cómo se cambia

.amset-filters {
  --amset-filters-gap: ...;
  --amset-filters-font: ...;
}

En el banco de pruebas

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