Versión 4.2 disponible
Novedades
- Modo oscuro automático
- Exportar a PDF
- Búsqueda un 40 % más rápida
HTML + CSSNotifications
Toast de nouvelle version
Annonce une mise à jour avec les nouveautés dépliables et un bouton qui affiche la progression.
Réglages
16px
1x
Code
<div class="uv-qup"><button type="button" class="fire">Afficher à nouveau</button><div class="tt" role="status"><span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v12M7.5 10.5L12 15l4.5-4.5"/><path d="M4 17v1.5A2.5 2.5 0 0 0 6.5 21h11a2.5 2.5 0 0 0 2.5-2.5V17"/></svg></span><div class="tx"><b>Version 4.2 disponible</b><details><summary>Nouveautés</summary><ul><li>Mode sombre automatique</li><li>Exporter en PDF</li><li>Recherche 40 % plus rapide</li></ul></details></div><button type="button" class="go"><span class="a">Mettre à jour</span><span class="b"><i></i></span><span class="c"><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"/></svg></span></button></div></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
Les applis de bureau, les PWA et les tableaux de bord ont besoin d'une façon polie de demander un rechargement. Ce toast annonce la nouvelle version, cache les nouveautés derrière un petit dépliant qui s'ouvre sur place, et transforme le bouton de mise à jour en indicateur de chargement puis en coche verte, l'action se voit donc aboutir.
Les nouveautés utilisent un élément details natif, accessible au clavier et sans script. Relie le bouton à ton service worker. Garde la liste à trois points courts pour qu'elle se lise d'un coup d'œil.