Segmented Control im iOS-Stil
Ein Segmented Control wie bei Apple, dessen weißer Indikator sich beim Gleiten zwischen den Optionen leicht streckt.
Einstellungen
Code
<div class="uv-fsi"><span class="p"></span><button class="on">Tag</button><button>Woche</button><button>Monat</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
Der bekannte Umschalter für Tag, Woche und Monat. Er passt zur Statistikansicht einer Fitness-App, zum Diagramm in einem Vertriebs-Dashboard oder zu einem Kalender mit wechselnder Ansicht. Jeder kennt dieses Element vom Smartphone, niemand muss darüber nachdenken. Wer ein iOS Segmented Control in HTML und CSS sucht, bekommt hier eines mit sanftem Strecken.
Zwei bis vier Optionen sind ideal. Bei mehr werden die Segmente schmal und die Beschriftungen gedrängt. Am natürlichsten wirkt es auf hellgrauen Flächen. In einem dunklen Theme solltest du den Schatten des Indikators abschwächen.