Segmented Control mit Sprung
Ein Indikator mit Farbverlauf, der kurz hochspringt und auf der neuen Option landet wie ein kleiner Ball.
Einstellungen
Code
<div class="uv-fsj"><span class="p"></span><button class="on">Neu</button><button>Top</button><button>In der Nähe</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
Dieses Control hat eine verspielte Note und passt gut zu Consumer-Apps. Etwa zu einer Restaurant-App, in der man zwischen Neu, Top bewertet und In der Nähe wechselt, oder zu einem Community-Feed. Durch den Sprung fühlt sich das Umschalten leicht an und macht sogar ein bisschen Spaß. Eine gute Wahl für ein animiertes Segmented Control ohne Konzern-Look.
Lass oberhalb etwas Luft, denn der Indikator hebt kurz ab und kann sonst unter einem Header verschwinden. In Banking-Apps oder Admin-Oberflächen ist Ruhe wichtiger als Verspieltheit, dort lieber verzichten. Kurze Beschriftungen funktionieren am besten.