Botón flotante de filtros
Un botón redondo flotante que se convierte en un pequeño panel de filtros con opciones que entran una a una.
Ajustes
Código
<div class="uv-fmf"><div class="ph"><div class="body"><span></span><span></span><span></span><span></span></div><div class="fb"><button class="tg"><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></button><div class="pn"><div class="tt">Filtrar por</div><button style="--i:0"><span class="ck"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span>Precio bajo</button><button style="--i:1"><span class="ck"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span>Mejor valorados</button><button style="--i:2"><span class="ck"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span>Cerca de mí</button><button style="--i:3"><span class="ck"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span>Disponibles</button></div></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
Útil cuando la pantalla es sobre todo contenido y los filtros se usan de vez en cuando. Un directorio de espacios de coworking, por ejemplo, donde solo a veces se quiere Precio bajo, Mejor valorados, Cerca de mí o Disponibles. El botón espera en su esquina hasta que alguien lo necesita. Se conoce como botón de acción flotante.
Un botón flotante puede tapar el último elemento de la lista, así que añade margen abajo. Limita el panel a cuatro o cinco opciones; si hay más, mejor un panel inferior completo. Tocar fuera debería cerrarlo, como pasa aquí.