Navegación
Un campo de búsqueda con panel de sugerencias. El botón de limpiar solo aparece cuando hay texto escrito.
<vadavo-search> recibe sus sugerencias como hijos option — se leen una sola vez como datos, no se muestran directamente. El propio elemento genera el campo, el icono de lupa y el panel, y filtra las sugerencias al escribir. Cada option admite data-subtitle para el texto secundario y data-href: si está presente, elegir esa sugerencia navega hasta ahí; si no, rellena el campo como cualquier otro control de formulario. El atributo compact reduce el campo a la altura que comparten los controles compactos, y shortcut muestra un atajo de teclado (p. ej. Ctrl+K / ⌘K) mientras el campo está vacío.
Al pasar el ratón sobre una sugerencia aparece un contorno; el relleno queda para la fila activa por teclado.
<vadavo-search placeholder="Buscar dominios, hosting, ayuda…" value="hosting" open>
<option data-subtitle="Planes y precios" data-href="javascript:void(0)">Hosting WordPress</option>
<option data-subtitle="Centros de datos en Madrid" data-href="javascript:void(0)">Hosting en España</option>
</vadavo-search>| Token | Qué es |
|---|---|
--search--radius--bar | El radio de borde de la barra de búsqueda. |
--search--radius--shortcut-hint | El radio de borde de la tecla que muestra el atajo. |
--search--border--shortcut-hint | El color del borde de la tecla que muestra el atajo. |
--search--border-width--shortcut-hint | El grosor del borde de la tecla que muestra el atajo. |
--search--border-style--shortcut-hint | El tipo (border-style) del borde de la tecla que muestra el atajo. |
--search--transition--nudge | La transición (duración y curva) del desplazamiento del chevron de un resultado al apuntarlo. |