Resultados
Umschalter Raster oder Liste
Ein Ansichtswähler, der Beispielkarten mit weicher Transition zwischen Raster und Liste umordnet.
Einstellungen
Code
<div class="uv-fvw"><div class="hd"><p>Ergebnisse</p><div class="sw" role="radiogroup" aria-label="Ansicht"><label><input type="radio" name="uv-fvw" checked><span aria-label="Raster"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4" y="4" width="6.5" height="6.5" rx="1.5"/><rect x="13.5" y="4" width="6.5" height="6.5" rx="1.5"/><rect x="4" y="13.5" width="6.5" height="6.5" rx="1.5"/><rect x="13.5" y="13.5" width="6.5" height="6.5" rx="1.5"/></svg></span></label><label><input type="radio" name="uv-fvw"><span aria-label="Liste"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6h11M9 12h11M9 18h11"/><circle cx="4.8" cy="6" r="1.1" fill="currentColor"/><circle cx="4.8" cy="12" r="1.1" fill="currentColor"/><circle cx="4.8" cy="18" r="1.1" fill="currentColor"/></svg></span></label><i class="pl" aria-hidden="true"></i></div></div><ul><li style="--h:210"><i></i><span><b></b><b></b></span></li><li style="--h:160"><i></i><span><b></b><b></b></span></li><li style="--h:20"><i></i><span><b></b><b></b></span></li><li style="--h:280"><i></i><span><b></b><b></b></span></li></ul></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
Produktkataloge, Dateimanager und Suchergebnisse bieten oft zwei Ansichten, und der Umschalter sollte zeigen, was sich ändert. Hier schiebt ein kleines Segment-Control mit Raster- und Listensymbol eine weiße Pille zwischen den Optionen hin und her, und die Karten darunter ordnen sich neu: Vorschaubilder schrumpfen, der Text rückt daneben und der Abstand wird enger.
Der Layoutwechsel ist reines CSS, gesteuert vom gewählten Radio, mit Transitions auf Raster, Abstand und Bildgröße. Setz deine Karten mit denselben Klassen ein, und es funktioniert ohne JavaScript.