Note en étoiles avec libellé
Les étoiles se remplissent jusqu’à celle cliquée, font un petit bond et un mot indique le sens de la note.
Réglages
Code
<div class="uv-rdt"><div class="rw"><button data-v="1"><svg viewBox="0 0 24 24"><path d="M12 2.6l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.5 6.1 20.6l1.2-6.5L2.5 9.5l6.6-.9z"/></svg></button><button data-v="2"><svg viewBox="0 0 24 24"><path d="M12 2.6l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.5 6.1 20.6l1.2-6.5L2.5 9.5l6.6-.9z"/></svg></button><button data-v="3"><svg viewBox="0 0 24 24"><path d="M12 2.6l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.5 6.1 20.6l1.2-6.5L2.5 9.5l6.6-.9z"/></svg></button><button data-v="4"><svg viewBox="0 0 24 24"><path d="M12 2.6l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.5 6.1 20.6l1.2-6.5L2.5 9.5l6.6-.9z"/></svg></button><button data-v="5"><svg viewBox="0 0 24 24"><path d="M12 2.6l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.5 6.1 20.6l1.2-6.5L2.5 9.5l6.6-.9z"/></svg></button></div><b class="lb">Non noté</b></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 Boutons radio
Où l’utiliser
Les cinq étoiles bien connues, pour les avis et les retours rapides : noter un produit après livraison, évaluer une formation en ligne ou l’écran « Comment était votre repas ? » d’une application de restaurant. Le libellé en dessous passe de « Très mauvais » à « Excellent » et aide à se décider. Une notation par étoiles en CSS avec un petit script.
Réécrivez les cinq libellés avec votre propre ton : ils comptent plus qu’on ne le croit. Si vous affichez la note moyenne ailleurs sur la page, utilisez la même couleur pour les deux.