Barra de filtros para móvil
Una fila de chips con scroll horizontal, bordes difuminados y un botón de filtros fijo con contador.
Ajustes
Código
<div class="uv-fms"><div class="ph"><div class="bar"><button class="fx"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7h10M18 7h2M4 17h4M12 17h8"/><circle cx="16" cy="7" r="2"/><circle cx="10" cy="17" r="2"/></svg><span class="bd">2</span></button><div class="sc"><button class="on">Todo</button><button class="">Cerca</button><button class="">Top</button><button class="">Nuevo</button><button class="">Barato</button><button class="">Familiar</button><button class="">Piscina</button></div></div><div class="body"><span></span><span></span><span></span></div></div></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Filtros
Dónde usarlo
Es el patrón que usan las apps de hoteles y alquiler vacacional encima de los resultados: Cerca, Barato, Familiar, Piscina y más hacia el lado. Los bordes difuminados indican que la fila sigue, y el botón fijo con su número lleva al panel completo de filtros. Búscalo como barra de chips con scroll horizontal.
Pon primero los filtros más usados, porque mucha gente nunca desliza la fila. El número del botón debería contar los filtros activos del panel, para que nadie olvide que tiene algo marcado. Pruébalo con el pulgar, no con el ratón.