Si tu perfil es privado, solo tus seguidores verán lo que publicas.
- Rrober_88
- Nnube.gris
Feuilles empilées avec profondeur
Des feuilles qui s'ouvrent les unes sur les autres : celle de derrière rétrécit et s'assombrit, Échap ne ferme que celle du dessus.
Réglages
Code
<div class="uvq13-stk"><div class="pg" aria-hidden="true"><i class="h"></i><i></i><i></i><i></i><i></i><i class="s"></i></div><button type="button" class="fire" aria-haspopup="dialog">Réglages du compte</button><div class="scr"></div><section class="sh" data-i="0" role="dialog" aria-modal="true" aria-labelledby="uvq13-stk-0"><i class="gr" aria-hidden="true"></i><header><span></span><b id="uvq13-stk-0">Réglages du compte</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><button type="button" class="row" data-to="1"><i class="ic" style="--c:#0ea5e9"><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 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6z"/></svg></i><span>Confidentialité</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></button><button type="button" class="row"><i class="ic" style="--c:#f43f5e"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9.5a6 6 0 0 1 12 0c0 4.5 2 6 2 6H4s2-1.5 2-6M10 19a2 2 0 0 0 4 0"/></svg></i><span>Notifications</span><em>Activées</em></button><button type="button" class="row"><i class="ic" style="--c:#8b5cf6"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><path d="M3.5 12h17M12 3.5c2.5 2.6 3.5 5.4 3.5 8.5s-1 5.9-3.5 8.5c-2.5-2.6-3.5-5.4-3.5-8.5s1-5.9 3.5-8.5"/></svg></i><span>Langue</span><em>Espagnol</em></button></section><section class="sh" data-i="1" role="dialog" aria-modal="true" aria-labelledby="uvq13-stk-1"><i class="gr" aria-hidden="true"></i><header><button type="button" class="bk" aria-label="Retour"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 6l-6 6 6 6"/></svg></button><b id="uvq13-stk-1">Confidentialité</b><span></span></header><label class="row"><span>Profil privé</span><input type="checkbox" role="switch" class="sw"></label><button type="button" class="row" data-to="2"><span>Comptes bloqués</span><em>2</em><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></button><p class="nt">Si ton profil est privé, seuls tes abonnés verront ce que tu publies.</p></section><section class="sh" data-i="2" role="dialog" aria-modal="true" aria-labelledby="uvq13-stk-2"><i class="gr" aria-hidden="true"></i><header><button type="button" class="bk" aria-label="Retour"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 6l-6 6 6 6"/></svg></button><b id="uvq13-stk-2">Comptes bloqués</b><span></span></header><ul><li><span class="av" style="--c:#f97316">R</span><span class="nm">rober_88</span><button type="button" class="ub"><span class="a">Débloquer</span><span class="b">Bloquer</span></button></li><li><span class="av" style="--c:#6366f1">N</span><span class="nm">nube.gris</span><button type="button" class="ub"><span class="a">Débloquer</span><span class="b">Bloquer</span></button></li></ul></section></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 réglages descendent souvent sur deux ou trois niveaux, et les feuilles empilées gardent ce chemin visible. Chaque nouvelle feuille monte pendant que la précédente recule, se soulève un peu et s'assombrit, pour savoir où l'on se trouve. Les boutons retour et Échap retirent une couche à la fois et le focus revient sur la ligne d'origine. Pour des réglages, un tunnel d'achat ou des filtres.
La couleur principale remplit l'interrupteur et les boutons de déblocage, le champ texte nomme la première feuille. Ajoute des lignes avec data-to vers la feuille suivante, les règles de profondeur mettent chaque couche à l'échelle.