Ligne à glisser pour terminer
Une ligne de liste qu'on coche en la faisant glisser à droite et qu'on décoche vers la gauche, ou avec les flèches.
Réglages
Code
<label class="uvq02-swp"><input type="checkbox"><span class="bg" aria-hidden="true"><span class="l"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg>Terminé</span><span class="r">Annuler</span></span><span class="fg"><span class="dt" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></span><span class="tx"><b>Répondre à Marta</b><small aria-hidden="true">Glisse pour cocher</small></span><span class="tm" aria-hidden="true">09:40</span></span></label>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 Cases à cocher
Voir tout : Cases à cocherOù l’utiliser
Reprise des applis de mail et de tâches, cette case à cocher est une ligne de liste avec un cercle d'état, un titre, une indication et l'heure. Glissée à droite, elle révèle un panneau vert et se coche ; vers la gauche, elle révèle annuler et se décoche, et un toucher l'inverse aussi. Au clavier, flèches, Espace et Entrée fonctionnent. Elle convient aux listes de tâches et boîtes de réception.
La couleur principale est le panneau terminé et la coche, la secondaire le côté annuler. Le seuil du geste vaut environ un tiers de la largeur, ce qui le rend volontaire sur mobile sans être difficile à atteindre sur ordinateur.