Toast de voyant de tableau de bord
Comme sur un tableau de bord : le voyant orange fait son test d'allumage et le pneu sous-gonflé continue de clignoter.
Réglages
Code
<div class="uvq09-car"><button type="button" class="fire">Afficher à nouveau</button><div class="tt" role="alert"><span class="ic" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6.5 5C4.5 7.2 3.5 9.6 3.5 12.2c0 2.4.8 4.4 2 6M17.5 5c2 2.2 3 4.6 3 7.2 0 2.4-.8 4.4-2 6"/><path d="M5 18.4h14M5.5 20.6l.8-2.2M9.5 20.6l.4-2.2M14.5 20.6l-.4-2.2M18.5 20.6l-.8-2.2M12 8v5.2M12 15.9v.01"/></svg></span><span class="tx"><b>Pression basse d'un pneu</b><small>Avant gauche : 1,6 bar</small><button type="button" class="ok">Compris</button></span><span class="cr" aria-hidden="true"><svg viewBox="0 0 40 64"><rect class="w lo" x="2" y="10" width="6" height="12" rx="2"/><rect class="w" x="32" y="10" width="6" height="12" rx="2"/><rect class="w" x="2" y="43" width="6" height="12" rx="2"/><rect class="w" x="32" y="43" width="6" height="12" rx="2"/><path class="bd" d="M10 7c0-3 3-5 10-5s10 2 10 5v50c0 3-3 5-10 5s-10-2-10-5z"/><path class="gl" d="M12.5 20.5c2.5-2.2 12.5-2.2 15 0l-1.6 7H14.1zM13.6 45.5h12.8l1.1 6c-2.5 1.7-12.5 1.7-15 0z"/></svg></span></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
On lit les symboles du tableau de bord en une fraction de seconde, ce qui en fait un bon modèle pour les alertes urgentes. Ce toast reprend un combiné sombre, le symbole orange de pression des pneus qui vacille comme au test des voyants et une vue de la voiture par le dessus où la roue concernée pulse. Pour les flottes, la voiture connectée et les capteurs domestiques.
La couleur principale est l'orange du voyant et la secondaire marque les pneus en bon état. Comme il utilise role alert, réserve-le aux problèmes qui demandent une réaction immédiate et relie le bouton Compris à ta propre action de confirmation.