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
Alle ansehen: FilterWofü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.