Comunidad de diseñohace 4 h
¿Qué tipografía usáis para interfaces?Debate86 comentarios
Abstimmung mit rollenden Ziffern
Pfeile für Zustimmung und Ablehnung: Der Pfeil hüpft, und nur die Ziffern, die sich ändern, rollen nach oben oder nach unten.
Einstellungen
Code
<div class="uvq15-vot"><div class="vb" role="group" aria-label="Stimmen"><button type="button" class="up" aria-pressed="false" aria-label="Dafür stimmen"><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="Dagegen stimmen"><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>Design-Community</span><span>vor 4 Std.</span></p><b>Welche Schrift nutzt ihr für Interfaces?</b><p class="tg"><span>Diskussion</span><span>86 Kommentare</span></p></div><p class="sr" aria-live="polite"></p></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Mikrointeraktionen
Alle ansehen: MikrointeraktionenWofür du ihn nutzen kannst
In Communitys steht und fällt ein Beitrag mit seiner Stimmenzahl, deshalb verdient die Zahl einen sorgfältigen Übergang. Ein Klick auf einen Pfeil füllt ihn mit Farbe und lässt ihn hüpfen, und der Wert ändert sich Ziffer für Ziffer: Nur die Stellen, die sich wirklich ändern, rollen, bei Zustimmung nach oben und bei Ablehnung nach unten.
Die Hauptfarbe markiert Zustimmung, die Zweitfarbe Ablehnung, und die Zahl übernimmt die Farbe deiner Stimme. Der Titel des Beitrags ist der editierbare Text. Ein direkter Wechsel von unten nach oben verschiebt den Wert um zwei, wie in den meisten Foren.