Segmented Control mit Farbwechsel
Ein Segmented Control, dessen Hintergrund und Indikator je nach gewählter Option den Farbton wechseln.
Einstellungen
Code
<div class="uv-fsc" style="--t:0"><span class="p"></span><button data-t="0" class="on">Alle</button><button data-t="1">Aktiv</button><button data-t="2">Fertig</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
Gemacht für Statusfilter. Eine To-do-App, die zwischen Alle, Offen und Erledigt wechselt, oder die Bestellübersicht eines Onlineshops mit ausstehend, versendet und zugestellt. Der Farbwechsel gibt jedem Zustand eine eigene Stimmung, man sieht sofort, in welcher Ansicht man ist. Schau ihn dir an, wenn du einen Statusfilter mit Farbe brauchst.
Wähle Farben, die zum Zustand passen: einen neutralen Ton für „Alle“, etwas Grünes für Erledigtes. Verlass dich aber nicht nur auf die Farbe. Die Beschriftung muss zeigen, was ausgewählt ist, auch für Menschen, die Farbtöne schlecht unterscheiden.