Fotos
Größenverstellbares Seitenpanel mit Rastpunkten
Ein Detailpanel, das du am Griff aufziehst und das an drei Breiten einrastet; der Inhalt ordnet sich per Container Queries neu.
Einstellungen
Code
<div class="uvq13-rsz"><p class="tt">Fotos</p><div class="gr"><button type="button" class="ph" style="--a:#f97316;--b:#7c3aed" data-d="4032 × 3024" aria-label="IMG_0412.jpg" aria-haspopup="dialog"></button><button type="button" class="ph" style="--a:#0ea5e9;--b:#14532d" data-d="3024 × 4032" aria-label="IMG_0418.jpg" aria-haspopup="dialog"></button><button type="button" class="ph" style="--a:#facc15;--b:#dc2626" data-d="4032 × 2268" aria-label="IMG_0433.jpg" aria-haspopup="dialog"></button><button type="button" class="ph" style="--a:#64748b;--b:#0f172a" data-d="4032 × 3024" aria-label="IMG_0451.jpg" aria-haspopup="dialog"></button><button type="button" class="ph" style="--a:#f472b6;--b:#0e7490" data-d="3024 × 3024" aria-label="IMG_0460.jpg" aria-haspopup="dialog"></button><button type="button" class="ph" style="--a:#a3e635;--b:#166534" data-d="4032 × 3024" aria-label="IMG_0477.jpg" aria-haspopup="dialog"></button></div><span class="snap" aria-hidden="true"><i style="--d:7.5"></i><i style="--d:11.5"></i><i style="--d:16"></i></span><aside class="pn" role="dialog" aria-labelledby="uvq13-rsz-n"><div class="hd" role="separator" tabindex="0" aria-orientation="vertical" aria-label="Panelbreite" aria-valuemin="0" aria-valuemax="2" aria-valuenow="1"><i></i></div><div class="in"><header><b class="fn" id="uvq13-rsz-n"></b><button type="button" class="x" aria-label="Schließen"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button></header><i class="pre" aria-hidden="true"></i><dl class="mt"><div><dt>Abmessungen</dt><dd class="dd"></dd></div><div><dt>Größe</dt><dd>4,2 MB</dd></div><div><dt>Kamera</dt><dd>f/1.8 · 1/250</dd></div><div><dt>Datum</dt><dd>12/10/2026</dd></div></dl><div class="act"><button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 4v11M7.5 10.5L12 15l4.5-4.5M5 19.5h14"/></svg><span>Herunterladen</span></button><button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 7h14M10 11v6M14 11v6M6.5 7l1 12.5h9l1-12.5M9.5 7V4.5h5V7"/></svg><span>Löschen</span></button></div></div></aside></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 Overlays
Alle ansehen: OverlaysWofür du ihn nutzen kannst
Inspektor-Panels haben nie die richtige Breite, also lässt dieses die Leute wählen. Zieh am Griff und das Panel folgt, gestrichelte Hilfslinien zeigen drei Rastbreiten, beim Loslassen federt es zur nächsten oder schließt sich, wenn du es fast zuschiebst. Innen wechseln Container Queries von einer kompakten Vorschau zu einer Datenliste und dann zu zwei Spalten. Passt zu Fotobibliotheken, Dateimanagern, Admin-Tabellen und Mailprogrammen.
Die Hauptfarbe ist der Griff und die Hauptaktion, die zweite deren sanfter Hintergrund. Der Griff ist ein fokussierbarer Trenner, der sich mit Pfeilen, Pos1 und Ende bewegt, und Escape schließt das Panel mit Fokus auf dem gewählten Element.