Chips avec croix pour retirer
Les chips actifs affichent une petite croix ; un clic, et le chip rétrécit puis disparaît. Un bouton les fait tous revenir.
Réglages
Code
<div class="uv-fcx"><button class="c on"><b>Tout</b><i class="x"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg></i></button><button class="c on"><b>Design</b><i class="x"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg></i></button><button class="c"><b>Code</b><i class="x"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg></i></button><button class="c"><b>Photos</b><i class="x"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg></i></button><button class="c"><b>Vidéo</b><i class="x"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg></i></button><button class="rs">Réinitialiser</button></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 partout où l’on fait le tri dans une liste de sujets. Une appli d’actualités, par exemple, où le lecteur masque les rubriques qu’il ne lit jamais, ou un écran d’accueil où l’on écarte les centres d’intérêt inutiles. La sortie en rétrécissant paraît voulue, pas accidentelle. On le cherche souvent sous le nom de tags supprimables.
Prévoyez toujours un retour en arrière, comme le bouton de restauration de la démo. Retirer un élément ne pose aucun problème tant que ce n’est pas définitif. Sur mobile, donnez à la croix une zone de clic généreuse et espacez bien les chips.