Contrôle segmenté coloré
Un contrôle segmenté dont le fond et l’indicateur changent de teinte selon l’option choisie.
Réglages
Code
<div class="uv-fsc" style="--t:0"><span class="p"></span><button data-t="0" class="on">Tout</button><button data-t="1">Actifs</button><button data-t="2">Terminé</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
Conçu pour les filtres de statut : une appli de tâches qui passe de Toutes à En cours puis Terminées, ou la page commandes d’une boutique en ligne. Le changement de couleur donne à chaque état son ambiance, on voit aussitôt dans quelle vue on se trouve. À regarder si vous avez besoin d’un filtre de statut en couleur.
Choisissez des couleurs logiques : un ton neutre pour « Toutes », un vert pour ce qui est terminé. Ne comptez pas seulement sur la couleur, car le libellé doit indiquer la sélection pour les personnes qui distinguent mal les teintes.