Fotos
Panneau latéral redimensionnable aimanté
Un panneau de détails qu'on étire par sa poignée et qui s'aimante à trois largeurs ; son contenu se réorganise avec les container queries.
Réglages
Code
<div class="uvq13-rsz"><p class="tt">Photos</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="Largeur du panneau" 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="Fermer"><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>Dimensions</dt><dd class="dd"></dd></div><div><dt>Taille</dt><dd>4,2 MB</dd></div><div><dt>Appareil photo</dt><dd>f/1.8 · 1/250</dd></div><div><dt>Date</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>Télécharger</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>Supprimer</span></button></div></div></aside></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Overlays
Voir tout : OverlaysOù l’utiliser
Les panneaux d'inspection n'ont jamais la bonne largeur, celui-ci laisse donc choisir. On tire la poignée et le panneau suit, des repères pointillés montrent trois largeurs aimantées et au relâchement il rebondit vers la plus proche, ou se ferme si on l'écrase presque. Pour une photothèque, un gestionnaire de fichiers ou un tableau d'administration.
La couleur principale est la poignée et l'action principale, la seconde son fond doux. La poignée est un séparateur qui prend le focus et se déplace aux flèches, avec Début et Fin, et Échap ferme le panneau en rendant le focus à l'élément choisi.