Todos los componentes (244)

Búsquedas recientes

Campos · RecentSearchList

Qué es y cuándo usarlo

Lo que se enseña bajo un buscador vacío: las búsquedas recientes para repetirlas de un clic, quitarlas o borrarlas, y los ámbitos en que se puede buscar.

Cuándo usarlo

Bajo el buscador de una aplicación, cuando todavía no se ha escrito nada.
useRecentSearches(clave) guarda las últimas búsquedas en el navegador (8 por defecto), sin repetirlas, y las comparte entre los componentes con la misma clave. En el servidor la lista está vacía.
scopes son los ámbitos (#pedidos 1042); parseScopedQuery separa el ámbito del texto al buscar.
Para la paleta de comandos, las recientes se pasan como un grupo más de CommandPalette.

Cuándo no

Sugerencias mientras se escribe: SearchField con sus opciones.

Teclado: cada búsqueda y cada ámbito son botones; la equis quita una.

Accesibilidad: cada apartado es una región con nombre y cada equis dice qué quita.

Aspecto fino: cada búsqueda lleva un reloj delante y se corta con puntos suspensivos si no cabe.

Cómo se ve

Búsquedas recientes

Buscar solo en

Aún no has elegido ninguna.

<RecentSearchList
  items={busquedas}
  onSelect={buscar}
  onRemove={olvidar}
  onClear={vaciar}
  scopes={alcances}
  onScope={cambiarAlcance}
/>

Props

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

Prop	Tipo	Para qué sirve
`items`obligatoria	`readonly string[]`	Las busquedas, de la mas reciente a la mas antigua: lo que da `useRecentSearches`.
`onSelect`obligatoria	`(query: string) => void`	Repetir una busqueda.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`onClear`	`() => void`	Borrarlas todas. Sin esto no sale el boton.
`onRemove`	`(query: string) => void`	Quitar una. Sin esto no sale la equis.
`onScope`	`(scope: SearchScope) => void`	Empezar una busqueda en un ambito: normalmente, escribir `#clave ` en el buscador.
`scopes`	`readonly SearchScope[]`	Los ambitos que admite el buscador (`#pedidos`): salen como atajos para empezar una busqueda en uno.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

En el banco de pruebas

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