Farbauswahl mit Ring
Runde Farbfelder: Das gewählte bekommt einen animierten Ring, darunter erscheint der Farbname.
Einstellungen
Code
<div class="uv-fcl"><div class="tt">Farbe</div><div class="rw"><button class="" style="--k2:#1d1d1f"><i></i></button><button class="on" style="--k2:#0071e3"><i></i></button><button class="" style="--k2:#34c759"><i></i></button><button class="" style="--k2:#ff9f0a"><i></i></button><button class="" style="--k2:#ff375f"><i></i></button><button class="" style="--k2:#af52de"><i></i></button></div><b class="nm">Blau</b></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
Die Farbreihe auf der Produktseite ist oft der Moment, in dem sich jemand verliebt. Stell dir einen Shop für Rucksäcke in sechs Farben vor: Ein Tipp, ein Ring schließt sich um das Feld, der Farbname erscheint darunter. Das Produktfoto passend zu wechseln ist der logische nächste Schritt. So etwas findet man unter Color Swatches oder Variantenauswahl.
Zeig immer den Namen, nicht nur den Punkt, denn „Marineblau“ und „Schwarz“ sind am Bildschirm leicht zu verwechseln. Gib sehr hellen Farbfeldern einen feinen Rand, sonst verschwindet Weiß auf einer weißen Seite.