Search bar

La barra de búsqueda permite realizar una exploración de contenido relacionado con una o varias palabras, permitiendo una navegación alternativa para encontrar contenido relevante a través de un filtrado por texto.

Racional de aplicación

La barra de búsqueda funciona como un filtro con el que se puede encontrar un contenido concreto sin necesidad de hacer uso de la navegación propia del site. Se recomienda el uso de la barra de búsqueda siempre que suponga una mejora a la hora de encontrar un contenido entre muchos otros similares o al mismo nivel. Sus funciones son:

• Facilitar la búsqueda de información.

• Agrupar contenido en base a una o varias palabras.

• Filtrar información en páginas con numerosas entradas de contenido.

Descartamos usar la barra de búsqueda en aquellos flujos lineales y procesos donde debemos guiar en cada paso y evitar que se rompa dicho flujo. Usos no recomendados de la barra de búsqueda son:

• Usar varias barras de búsqueda en una misma interfaz.

• En flujos únicos de interacción (secuencia de pasos).

• Si no hay suficiente contenido para ofrecer una respuesta.

Interacción

Dispositivo	Interacción
Ratón	Se puede activar la barra de búsqueda haciendo clic en cualquier lugar dentro del campo de entrada.
Teclado	Se puede activar una barra de búsqueda presionando Intro o Espacio mientras el input está enfocado.

Anatomía y variabilidad

Anatomía del componente

La barra de búsqueda consta de varios elementos que conforman su anatomía. Placeholder, icono e input. El placeholder e icono ayudan y apoyan a nivel de reconocimiento y describen el uso. El input por su parte devuelve una respuesta visual en los diferentes estados según la interacción y estado en el que se encuentre.

Letra	Elemento	Descripción
A	Icono	Icono que ayuda a identificar el uso del componente.
B	Texto de entrada	Al introducir texto, desaparece el texto predeterminado para visualizar lo que por teclado se introduce.
C	Campo de entrada	Elemento donde se introduce la información.

Variabilidad de estados

Letra	Estado	Descripción
A	Default	Estado por defecto, el componente está disponible para ser utilizado.
B	Hover	Visible al posicionar el cursor del mouse encima del input.
C	Active	Activado por mouse con click o tabulador.
D	Filled	Cuando se ha tecleado contenido en el campo de entrada.
E	Disabled	Estado no disponible, normalmente atenuado visualmente.

Instalación

npm i --save @plural-wc/searchbar
// or
yarn add @plural-wc/searchbar

import { PluralSearchbar } from '@plural-wc/searchbar';
// or
import '@plural-wc/searchbar/plural-searchbar.js';

Uso

Uso básico

<plural-searchbar placeholder="Search..."> </plural-searchbar>

Disabled

<plural-searchbar placeholder="Disabled" disabled> </plural-searchbar>