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

1
npm i --save @plural-wc/searchbar
2
// or
3
yarn add @plural-wc/searchbar
Copied!
1
import { PluralSearchbar } from '@plural-wc/searchbar';
2
// or
3
import '@plural-wc/searchbar/plural-searchbar.js';
Copied!

Uso

Uso básico

1
<plural-searchbar placeholder="Search..."> </plural-searchbar>
Copied!

Disabled

1
<plural-searchbar placeholder="Disabled" disabled> </plural-searchbar>
Copied!
Última actualización 8mo ago