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.
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.
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. |
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. |
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. |
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';
<plural-searchbar placeholder="Search..."> </plural-searchbar>
<plural-searchbar placeholder="Disabled" disabled> </plural-searchbar>
Última actualización 1yr ago