Fahrmodus-Schalter
Ein Kombiinstrument wechselt von ECO auf SPORT: Die Nadel steigt, der Bogen wird rot und das Panel vibriert.
Einstellungen
Code
<label class="uvq03-drv"><input type="checkbox" role="switch"><span class="cl"><svg viewBox="0 12 100 50" aria-hidden="true"><path class="tk" d="M12 56A38 38 0 0 1 88 56" pathLength="1"/><path class="ar" d="M12 56A38 38 0 0 1 88 56" pathLength="1"/><g class="nd"><path d="M50 56L50 24"/><circle cx="50" cy="56" r="4"/></g></svg><span class="md"><b class="e">ECO</b><b class="s">SPORT</b></span></span>Fahrmodus</label>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 Schalter
Alle ansehen: SchalterWofür du ihn nutzen kannst
Aus modernen Armaturenbrettern übernommen, ist dieser Schalter ein kleines dunkles Kombiinstrument mit Bogenanzeige und Nadel. Aus steht er auf ECO mit kurzem grünem Bogen; eingeschaltet schwenkt die Nadel hoch, der Bogen wächst und wird rot, SPORT erscheint unter der Anzeige, und das Panel rumpelt kurz. Die Anzeige ist ein Inline-SVG mit pathLength, die Bogenfüllung lässt sich leicht anpassen.
Die Hauptfarbe steht für den Sportmodus, die zweite für den Sparmodus. Benenne die beiden Modi im HTML um, etwa COMFORT und TRACK, und nutze ihn für Leistungsmodi, Energiepläne oder Boost-Funktionen.