Barre de filtres mobile
Une rangée de chips qui défile à l’horizontale, aux bords estompés, avec un bouton de filtres fixe et son badge.
Réglages
Code
<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">Tout</button><button class="">À proximité</button><button class="">Top</button><button class="">Nouveau</button><button class="">Bon marché</button><button class="">Famille</button><button class="">Piscine</button></div></div><div class="body"><span></span><span></span><span></span></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
C’est le modèle qu’utilisent les applis d’hôtels et de locations au-dessus des résultats : À proximité, Petit prix, Famille, Piscine, et d’autres sur le côté. Les bords estompés indiquent que la rangée continue, et le bouton fixe avec badge ouvre le panneau complet. On le trouve sous le nom de barre de chips à défilement horizontal.
Mettez en premier les filtres les plus utilisés, car beaucoup ne font jamais défiler la rangée. Le badge doit compter les filtres actifs du panneau complet, pour qu’on n’oublie pas ce qui est activé. Testez-la au pouce, pas à la souris.