Barre de filtres avec tags
Des menus déroulants en haut ; chaque choix devient en dessous un tag qu’on peut retirer, avec une petite animation.
Réglages
Code
<div class="uv-ftb"><div class="rw"><div class="dd"><button class="tg">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="mn"><button data-v="Design">Design</button><button data-v="Code">Code</button><button data-v="Photos">Photos</button></div></div><div class="dd"><button class="tg">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="mn"><button data-v="Gratuit">Gratuit</button><button data-v="Premium">Premium</button></div></div><div class="dd"><button class="tg">Niveau<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="mn"><button data-v="Basique">Basique</button><button data-v="Avancé">Avancé</button></div></div></div><div class="tags"></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
Pratique pour les catalogues à grille large, où une colonne latérale prendrait trop de place. Une plateforme de cours en ligne, par exemple, avec Catégorie, Prix et Niveau en haut. Chaque choix s’affiche dessous sous forme de tag, on voit et on annule ses filtres d’un coup d’œil. C’est la barre de filtres horizontale avec chips que beaucoup cherchent.
Gardez des libellés fixes sur les menus, comme « Niveau », et laissez les tags afficher les valeurs. Ajoutez un lien « Tout effacer » dès trois tags. Si la rangée déborde, rangez les filtres peu utilisés derrière un bouton « Plus ».