Foto subida a la galeríaDesliza a un lado para descartar
HTML + CSSNotifications
Toast à balayer pour fermer
Fais glisser le toast sur le côté pour le fermer ; il s'estompe en s'éloignant et revient si on le lâche tôt.
Réglages
16px
1x
Code
<div class="uv-qsw"><button type="button" class="fire">Afficher à nouveau</button><div class="tt" role="status"><span class="th" aria-hidden="true"></span><span class="tx"><b>Photo ajoutée à la galerie</b><small>Balaie sur le côté pour fermer</small></span><button type="button" class="x" aria-label="Écarter"><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></div><span class="hn" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 7l-5 5 5 5M16 7l5 5-5 5"/></svg></span></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 Notifications
Voir tout : NotificationsOù l’utiliser
Sur mobile, on s'attend à chasser les notifications d'un geste. Ce toast suit un glissement horizontal avec une légère inclinaison et s'estompe en avançant ; au-delà d'un seuil, il s'envole, sinon il revient au centre avec un ressort. Une petite double flèche remue deux fois après son apparition pour révéler le geste.
Un bouton de fermeture fait la même chose à la souris et au clavier, et le défilement vertical continue de fonctionner. Remplace la vignette et le message par ton propre contenu.