Pulsa una nota para fijarla
Notes épinglées sur liège
Notes sur un tableau en liège : un clic fait tomber une punaise et la note se redresse ; libérée, elle se balance.
Réglages
Code
<div class="uvq15-pin"><div class="bd"><button type="button" class="nt" style="--c:var(--c2);--r:-5deg" aria-pressed="false"><span class="pn" aria-hidden="true"></span><span class="tx">Acheter pain et café</span></button><button type="button" class="nt" style="--c:#fbcfe8;--r:4deg" aria-pressed="false"><span class="pn" aria-hidden="true"></span><span class="tx">Appeler Ana à 17 h</span></button><button type="button" class="nt" style="--c:#bbf7d0;--r:-2deg" aria-pressed="false"><span class="pn" aria-hidden="true"></span><span class="tx">Idées pour le logo</span></button></div><p class="hd">Touche une note pour l’épingler</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
Épingler est une action courante dans les tableaux, les applis de notes et les dashboards, et ce bloc la montre avec un vrai liège. Les notes libres pendent un peu de travers avec une ombre profonde ; un clic fait tomber une punaise rouge, la note se redresse et se plaque contre le liège. Un second clic retire la punaise et la note se balance un instant.
La couleur principale teinte la tête de la punaise et la secondaire la première note, les deux autres restent rose et menthe. Chaque note est un bouton bascule avec aria-pressed, les lecteurs d'écran savent donc si elle est épinglée. L'écriture manuscrite n'utilise que des polices système.