Search
La búsqueda del producto: un campo en el centro de la pantalla, con resultados mientras se escribe, uno por línea.
En esta página
Playground
Resultados
Fondo
<dialog open class="feitio-dialog search-dialog search-sample" id="pg-search" aria-labelledby="pg-search-t"><form method="dialog"><h2 id="pg-search-t" class="feitio-visually-hidden">Buscar en Feitio</h2><div class="search-head"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-search"></use></svg><label class="feitio-visually-hidden" for="pg-search-field">Buscar en Feitio</label><input class="search-field" id="pg-search-field" type="search" autocomplete="off" placeholder="Button, color…"><button type="submit" class="feitio-button close" data-size="small" value="close"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-close"></use></svg>Cerrar</button></div><ul class="results"><li><a href="#playground" data-active><strong>Table</strong><small>Componentes</small></a></li><li><a href="#playground"><strong>Tokens</strong><small>Desarrollo</small></a></li></ul><p class="foot"><span><kbd class="feitio-kbd">↵</kbd> abre el primero</span><span><kbd class="feitio-kbd">↑</kbd><kbd class="feitio-kbd">↓</kbd> elige</span><span><kbd class="feitio-kbd">Esc</kbd> cierra</span></p></form></dialog>Cuándo usarlo
- En un producto o documentación con muchas páginas, donde encontrar cosas a través del menú tarda mucho.
Cuándo no usarlo
- Para filtrar una lista en la pantalla: un campo de filtro encima, como en los catálogos.
- Con pocas páginas: el menú es suficiente.
Ejemplos
La búsqueda de este sitio
Toca el botón, o presiona / o Ctrl + K.
Mostrar código
<button type="button" class="feitio-button" data-open-search>…Buscar</button>
<dialog class="feitio-dialog search-dialog" aria-labelledby="busca-t">
<form method="dialog">
<div class="search-head">…<input class="search-field" type="search">…</div>
<ul class="results">…</ul>
<p class="foot">…</p>
</form>
</dialog>Anatomía
- Campo: con lupa y Cerrar en la misma línea.
- Resultados: uno por línea, el nombre y el área; el primero ya marcado.
- Teclas: qué hace cada una.
Estados
- Abrir: en el centro de la pantalla, un poco por encima; un toque fuera lo cierra, porque buscar no decide nada.
- Escribiendo: los resultados cambian con cada letra; Enter abre el primero y las flechas navegan por la lista.
- Nada encontrado: lo dice y sugiere otra palabra.
Donde vienen los resultados
El índice se construye cuando el sitio se publica, desde cada página (con Pagefind, que funciona sin servidor). En este borrador, la lista se escribe a mano.
Accesibilidad
- Es un Dialog con nombre; el foco comienza en el campo.
- Los resultados son enlaces: Tab, flechas y Enter funcionan.
Atributos
| Atributo | Valores | Para qué sirve |
|---|---|---|
data-open-search | en el botón de apertura | Abrir la búsqueda. |
class="feitio-dialog search-dialog" | en el <dialog> | La búsqueda, que se cierra con un toque fuera. |
class="results" | la lista | Un resultado por línea. |