Filter-Chips mit Zähler
Jeder Chip trägt eine kleine Zahl, die bei jeder Änderung kurz hochhüpft.
Einstellungen
Code
<div class="uv-fcb"><button class="on">Alle<span class="b">12</span></button><button class="">Design<span class="b">34</span></button><button class="">Code<span class="b">7</span></button><button class="">Fotos<span class="b">21</span></button></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 Filter
Wofür du ihn nutzen kannst
Zahlen helfen bei der Entscheidung, wohin man klickt. In einem Community-Forum kannst du zeigen, wie viele Threads unter Allgemein, Hilfe, Projekte und Jobs liegen, in einem Support-Postfach, wie viele Tickets offen, wartend oder erledigt sind. Das Hüpfen lenkt den Blick auf neue Werte, ohne aufdringlich zu sein. Ideal, wenn du Filter-Tabs mit Badge suchst.
Die Zahlen müssen stimmen und aktuell sein, sonst geht der Schuss nach hinten los. Steht eine Kategorie auf null, lieber ausgrauen statt ausblenden. Und bleib möglichst bei drei Stellen, „999+“ ist völlig in Ordnung.