Comunidad de diseñohace 4 h
¿Qué tipografía usáis para interfaces?Debate86 comentarios
Votes aux chiffres qui défilent
Des flèches pour voter pour ou contre : la flèche sautille et seuls les chiffres qui changent défilent vers le haut ou le bas.
Réglages
Code
<div class="uvq15-vot"><div class="vb" role="group" aria-label="Votes"><button type="button" class="up" aria-pressed="false" aria-label="Voter pour"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 4 4 13h5v7h6v-7h5z"/></svg></button><span class="n" aria-hidden="true">1.284</span><button type="button" class="dn" aria-pressed="false" aria-label="Voter contre"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20 4 11h5V4h6v7h5z"/></svg></button></div><div class="ps"><p class="mt"><span>Communauté design</span><span>il y a 4 h</span></p><b>Quelle typo utilisez-vous pour les interfaces ?</b><p class="tg"><span>Débat</span><span>86 commentaires</span></p></div><p class="sr" aria-live="polite"></p></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 Micro-interactions
Voir tout : Micro-interactionsOù l’utiliser
Dans une communauté, le nombre de votes compte beaucoup, alors il mérite une transition soignée. Un clic sur une flèche la remplit de couleur et la fait sautiller, puis le score change chiffre par chiffre : seuls ceux qui changent vraiment défilent, vers le haut pour un vote positif et vers le bas pour un vote négatif. Un second clic retire le vote.
La couleur principale marque les votes positifs et la secondaire les votes négatifs, et le score prend la couleur de ton vote. Le titre de la publication est le texte modifiable. Passer directement du bas vers le haut déplace le score de deux, comme sur la plupart des forums.