Volver a Components

Search Box

<sg-search-box> v0.1.1

Componente de búsqueda con input, botón de buscar y botón de limpiar. Soporta Enter para buscar.

Ejemplos

Básico

example.html 
<sg-search-box placeholder="Buscar usuarios..."></sg-search-box>

Con valor inicial

example.html 
<sg-search-box
  value="John Doe"
  placeholder="Buscar..."
></sg-search-box>

Tamaños

example.html 
<sg-search-box size="sm" placeholder="Pequeño"></sg-search-box>
<sg-search-box size="md" placeholder="Mediano"></sg-search-box>
<sg-search-box size="lg" placeholder="Grande"></sg-search-box>

Textos personalizados

example.html 
<sg-search-box
  placeholder="Find products..."
  search-button-label="Find"
  clear-button-label="Clear"
></sg-search-box>

Solo input

example.html 
<sg-search-box
  placeholder="Escribe y presiona Enter..."
  hide-search-button="true"
  hide-clear-button="true"
></sg-search-box>

Deshabilitado

example.html 
<sg-search-box
  placeholder="No disponible"
  disabled="true"
></sg-search-box>

Con eventos

Abre la consola para ver los eventos

example.html 
<sg-search-box
  id="search-events"
  placeholder="Buscar y ver consola..."
></sg-search-box>

<script>
  const searchBox = document.getElementById('search-events');
  searchBox.addEventListener('sgSearch', (e) => {
    console.log('Buscando:', e.detail);
  });
  searchBox.addEventListener('sgClear', () => {
    console.log('Limpiado');
  });
</script>

API Reference

Propiedades

10
Prop Tipo Default Descripción
value string '' Valor actual de búsqueda
placeholder string 'Buscar...' Texto del placeholder
search-button-label string 'Buscar' Texto del botón buscar
clear-button-label string 'Limpiar' Texto del botón limpiar
search-icon string 'view' Icono del botón buscar
clear-icon string 'delete' Icono del botón limpiar
size 'sm' | 'md' | 'lg' 'md' Tamaño del componente
disabled boolean false Deshabilita el componente
hide-search-button boolean false Oculta el botón de búsqueda
hide-clear-button boolean false Oculta el botón de limpiar

Eventos

3
Evento Tipo Descripción
sgInput CustomEvent<string> Emitido cuando el texto cambia
sgSearch CustomEvent<string> Emitido al buscar (click o Enter)
sgClear CustomEvent<void> Emitido al limpiar

Cómo usar