'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Datos
FilterBar
Filtros para listas y tablas: vistas guardadas como pestañas, una búsqueda, filtros activos como chips que editas en un popover o quitas, un menú Agregar filtro, Quitar todo y espacio para ordenar o exportar. Filtros de una opción, varias opciones, texto y sí o no.
import { FilterBar } from '@alea/ui';
Ejemplos
FilterBar
Vistas guardadas, una búsqueda, filtros activos como chips (presiona uno para editarlo, × para quitarlo), Agregar filtro y Quitar todo. El valor son datos simples que envías a tu API.
view: all · search: “” · filters: {"status":["open"]}
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-border…--alea-border-strong…--alea-surface-hover…--alea-surface-raised…--alea-text…--alea-text-muted…
Space
--alea-space-2…--alea-space-3…
Radius
--alea-radius-full…
Type
--alea-font-family-body…--alea-font-size-sm…--alea-font-weight-medium…--alea-font-weight-semibold…
Motion
--alea-motion-duration-base…--alea-motion-ease-out…
Props
FilterBar props
Filtros para una lista o tabla: vistas guardadas, una búsqueda, filtros activos como chips que se pueden editar o quitar, un menú Agregar filtro y Quitar todo.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
filtersobligatoria | FilterDef[] | - | Los filtros que se pueden agregar. |
aria-label | string | - | Nombre para lectores de pantalla. Por defecto "Filtros". |
className | string | - | Clases extra. |
defaultValue | FilterValue | - | Los filtros activos al inicio. |
end | ReactNode | - | Contenido al final de la fila: orden, exportar, un selector de vista. |
onChange | ((value: FilterValue) => void) | - | Se llama con todos los filtros activos cuando uno cambia. |
onSearchChange | ((q: string) => void) | - | Se llama mientras se escribe en la búsqueda. |
onViewChange | ((id: string) => void) | - | Se llama cuando se elige una vista. |
search | string | - | El texto de búsqueda (controlado). Omite search y onSearchChange para ocultar la búsqueda. |
searchPlaceholder | string | - | Placeholder de la búsqueda. |
value | FilterValue | - | Los filtros activos y sus valores (controlado). |
view | string | - | La vista actual. |
views | { id: string; label: string; count?: number; }[] | - | Vistas guardadas como pestañas sobre los filtros (Todos, Sin pagar, Míos). |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
- Estados
- Hover
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-filterbar.alea-filterbar-row.alea-filterbar-search.alea-filterbar-chips.alea-filter-chip.alea-filter-chip-main.alea-filter-chip-icon.alea-filter-chip-label.alea-filter-chip-value.alea-filter-popover.alea-filter-chip-remove.alea-filterbar-end- Atributos data
data-empty
Accesibilidad
- Un grupo con nombre; cada chip es un botón que dice el filtro y su valor, más un botón Quitar con nombre.
- Editar abre un diálogo en popover con el foco adentro; Escape lo cierra y devuelve el foco al chip.
- Quitar todo y Agregar filtro son botones reales; las vistas son pestañas.
Teclado
| Tecla | Acción |
|---|---|
| Tab | Recorre la búsqueda, los chips, Agregar filtro y Quitar todo |
| Enter o Espacio | Edita un chip o abre Agregar filtro |
| Escape | Cierra el editor |
Qué hacer y qué evitar
Hacer
- Pon primero los filtros más usados en Agregar filtro.
- Guarda las combinaciones comunes como vistas.
Evitar
- No apliques los filtros solo con un botón Aplicar aparte cuando los resultados son rápidos.