Bouton flottant de filtres
Un bouton rond flottant qui se transforme en petit panneau de filtres, dont les options arrivent une à une.
Réglages
Code
<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">Filtrer par</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>Petit prix</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>Les mieux notés</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>Près de moi</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 pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Filtres
Où l’utiliser
Utile quand l’écran est surtout du contenu et que les filtres servent de temps en temps. Un annuaire d’espaces de coworking, par exemple, où l’on fait défiler les fiches et où l’on veut parfois Petit prix, Mieux notés, Près de moi ou Disponible. Le bouton attend dans son coin qu’on en ait besoin. On l’appelle aussi bouton d’action flottant.
Un bouton flottant peut masquer le dernier élément de la liste : ajoutez une marge en bas du contenu. Limitez le panneau à quatre ou cinq options, au-delà un vrai panneau coulissant s’impose. Un appui à l’extérieur doit le fermer, comme ici.