Panneau de filtres coulissant
Un panneau qui monte du bas avec une poignée, des sections repliables et un bouton Appliquer avec compteur.
Réglages
Code
<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> Filtres</button><div class="ov"></div><div class="sh"><span class="gr"></span><div class="ac open"><button class="hd">Catégorie<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">Design</button><button class="op2">Code</button><button class="op2">Photos</button></div></div><div class="ac"><button class="hd">Prix<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">Faible</button><button class="op2">Moyen</button><button class="op2">Élevé</button></div></div><button class="ap">Appliquer <b class="n">0</b></button></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
Sur mobile, un bottom sheet est l’endroit le plus confortable pour ranger tous les filtres. Pensez à un site de seconde main où l’on filtre par catégorie, prix et état. Les sections se replient pour que le panneau ne devienne pas trop haut, et le bouton Appliquer indique combien d’options sont cochées. On parle aussi de tiroir de filtres mobile.
Permettez de le fermer en touchant le fond assombri, comme dans la démo. Le bouton Appliquer doit rester visible en bas. Avec seulement deux ou trois filtres, quelques chips au-dessus de la liste suffisent et demandent moins de gestes.