HTML + CSSFiltros
Panel inferior de filtros
Un panel que sube desde abajo con asa, secciones plegables y un botón Aplicar con contador.
Ajustes
16px
1x
Código
<div class="uv-fmh"><div class="ph"><button class="op"><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> Filtros</button><div class="ov"></div><div class="sh"><span class="gr"></span><div class="ac open"><button class="hd">Categoría<i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></i></button><div class="bd"><button class="op2">Diseño</button><button class="op2">Código</button><button class="op2">Fotos</button></div></div><div class="ac"><button class="hd">Precio<i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></i></button><div class="bd"><button class="op2">Bajo</button><button class="op2">Medio</button><button class="op2">Alto</button></div></div><button class="ap">Aplicar <b class="n">0</b></button></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
En el móvil, un bottom sheet es el sitio más cómodo para todos los filtros. Piensa en una web de segunda mano donde se filtra por categoría, precio y estado. Las secciones se pliegan para que el panel no crezca demasiado, y el botón Aplicar dice cuántas opciones llevas marcadas. También lo verás como cajón de filtros para móvil.
Deja que se cierre tocando el fondo oscurecido, como en la demo. El botón Aplicar debe verse siempre abajo. Si solo tienes dos o tres filtros, unos chips sobre la lista resuelven lo mismo con menos toques.