Bücherregal, das sich selbst sortiert
Bücher auf einem Regalbrett hüpfen und ordnen sich nach Höhe, Farbe oder Jahr neu, wenn du die Sortierung wechselst.
Einstellungen
Code
<div class="uvq05-sh"><div class="hd"><span class="lb">Sortieren nach</span><div class="sg" role="radiogroup" aria-label="Sortieren nach"><label><input type="radio" name="uvq05-sh" checked><span>Höhe</span></label><label><input type="radio" name="uvq05-sh"><span>Farbe</span></label><label><input type="radio" name="uvq05-sh"><span>Jahr</span></label></div></div><div class="sf" aria-hidden="true"><i class="bk" style="--h:5.2em;--w:1.1em;--b:#c0392b;--x0:2.34em;--x1:0em;--x2:3.56em;--d:0"><b>1987</b></i><i class="bk" style="--h:4.2em;--w:0.9em;--b:#2e86ab;--x0:7.02em;--x1:5.6em;--x2:5.9em;--d:1"><b>2004</b></i><i class="bk" style="--h:6em;--w:1.3em;--b:#1e3d59;--x0:0em;--x1:6.62em;--x2:0em;--d:2"><b>1952</b></i><i class="bk" style="--h:4.8em;--w:1em;--b:#f2a541;--x0:4.68em;--x1:2.34em;--x2:8.24em;--d:3;--t:#3a2a10"><b>2019</b></i><i class="bk" style="--h:5.6em;--w:0.8em;--b:#3c896d;--x0:1.42em;--x1:3.46em;--x2:2.64em;--d:4"><b>1971</b></i><i class="bk" style="--h:3.8em;--w:1.2em;--b:#9b5de5;--x0:8.04em;--x1:8.04em;--x2:6.92em;--d:5"><b>2011</b></i><i class="bk" style="--h:5em;--w:1em;--b:#e76f51;--x0:3.56em;--x1:1.22em;--x2:4.78em;--d:6"><b>1999</b></i><i class="bk" style="--h:4.4em;--w:1.1em;--b:#264653;--x0:5.8em;--x1:4.38em;--x2:1.42em;--d:7"><b>1963</b></i><span class="pt"><i></i><i></i><i></i></span></div></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
Sortiermenüs ordnen meist nur eine Liste um, hier dagegen sind die Elemente greifbar: acht Bücher auf einem Holzbrett mit Goldbändern und dem Jahr auf dem Rücken. Jede Option speichert vorab berechnete Positionen in CSS-Variablen, die Bücher gleiten mit einem kleinen Hüpfer an ihren Platz, ganz ohne JavaScript. Eine Topfpflanze leistet dem Regal Gesellschaft.
Die erste Farbe bestimmt Brett und aktive Option, die zweite die Pflanze. Ersetze die Bücher durch eigene Elemente und berechne die drei Positionssätze neu, oder ergänze eine vierte Ordnung wie den Titel über weitere Variablen.