Search

O Search é a lista de itens de um catálogo com um campo de busca e os filtros por categoria. Use-o na página que lista todos os itens. Cada item aparece como um cartão com o slug da sua categoria, e a página de cada categoria recebe só os itens dessa categoria.

Os filtros têm dois formatos, pela propriedade layout:

• sidebar (padrão): filtros em uma coluna ao lado da lista, a partir de 1024 px.
• chips: filtros em uma linha de chips acima dos resultados.

Com JavaScript, a busca filtra na própria página: compara as palavras sem acento e sem diferenciar maiúsculas, combina com a categoria, mostra 12 itens por vez e anuncia quantos itens aparecem. Sem JavaScript, cada categoria é um link para a sua página, e a lista mostra exatamente o que a página recebeu.

Quando a página não lista os itens, ela pode mostrar só o formulário de busca (q, enviado por GET) apontando para a página que lista. Isso vale só quando items está vazio.

Search

Pasta: ui/sections/search

Variantes

Id	Variante	Tom
search-sidebar-filters-light	sidebar-filters	light
search-sidebar-filters-gray	sidebar-filters	gray

Propriedades

Propriedade	Tipo	Obrigatória	Descrição
variant	"sidebar-filters"	Não	—
title	string	Sim	—
intro	string	Não	—
items	readonly SearchItem[]	Sim	—
filters	readonly SearchFilter[]	Sim	—
allHref	string	Sim	Page that lists every item (the "Todos" link).
active	string	Não	`slug` of the category page being shown; without it "Todos" is the current page. A category page must receive only the items of that category in `items`: without JS the page shows exactly what it receives.
layout	"sidebar" | "chips"	Não	`sidebar` (default): filters in a column from 1024px; `chips`: filters in one row of chips above the results.
box	{ readonly action: string; }	Não	A search form that sends `q` (GET) to `action`, for a page that does not list the items itself (a home that points to the search page, whose island reads `q`). Used only when `items` is empty.
tone	Tone	Não	—
density	Density	Não	—
width	Width	Não	—
id	string	Não	—

Onde aparece nos templates

• templates/multi-page/models/catalogo/files/src/pages/catalog.ts:55, na lista de todos os itens, e templates/multi-page/models/catalogo/files/src/pages/catalog.ts:107, na página de cada categoria.

Captura da primeira variante do catálogo (sidebar-filters, tom claro, em 1280 px). As duas capturas mostram só a primeira dobra, 900 px de altura: a lista completa mediria mais de 4900 px no celular.

A mesma variante em 360 px: