Partage en éventail
Le bouton de partage déploie quatre destinations en arc avec un ressort décalé ; flèches pour naviguer, Échap pour replier.
Réglages
Code
<div class="uvq15-shr"><div class="fan"><button type="button" class="it" tabindex="-1" style="--i:0;--x:-4.83em;--y:-1.29em" aria-label="Copier le lien" data-m="Lien copié"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 14a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1"/><path d="M14 10a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1"/></svg></button><button type="button" class="it" tabindex="-1" style="--i:1;--x:-2.11em;--y:-4.53em" aria-label="Mail" data-m="Ouverture du mail…"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></button><button type="button" class="it" tabindex="-1" style="--i:2;--x:2.11em;--y:-4.53em" aria-label="Message" data-m="Ouverture des messages…"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12Z"/></svg></button><button type="button" class="it" tabindex="-1" style="--i:3;--x:4.83em;--y:-1.29em" aria-label="Code QR" data-m="Code QR prêt"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><path d="M14 14h3v3h-3zM20 14v.01M14 20h.01M17 20h4v-3"/></svg></button><button type="button" class="mn" aria-expanded="false" aria-label="Partager"><span class="ou"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="m8.6 13.5 6.8 4M15.4 6.5l-6.8 4"/></svg></span><span class="x"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></span></button></div><p class="tt" aria-live="polite"></p></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 Micro-interactions
Voir tout : Micro-interactionsOù l’utiliser
Les menus de partage ouvrent souvent un panneau entier alors qu'il n'y a que quelques options. Celui-ci reste compact : le bouton rond devient une croix et quatre destinations se déploient en arc au-dessus, l'une après l'autre avec un ressort qui dépasse un peu. Chacune a son infobulle et, après le choix, une courte confirmation s'affiche dessous.
La couleur principale sert au déclencheur et la secondaire met en avant l'option survolée. Les positions viennent d'un angle et d'un rayon écrits dans le balisage, donc une cinquième destination demande juste un bouton de plus. Copier le lien place l'adresse de la page dans le presse-papiers.