Pago recibidoDe Lucía Martín, alquiler de octubre+0,00 €
HTML + CSSToasts
Toast für eingegangene Zahlung
Geld geht ein und der Betrag zählt mit grünem Leuchten bis zur endgültigen Summe hoch.
Einstellungen
16px
1x
Code
<div class="uv-qpy"><button type="button" class="fire">Zahlung simulieren</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="M3 10l9-5.5 9 5.5M5 10.5v7M9.5 10.5v7M14.5 10.5v7M19 10.5v7M3 20h18"/></svg></span><span class="tx"><b>Zahlung erhalten</b><small>Von Lucía Martín, Miete Oktober</small></span><span class="am">+<span class="n" data-v="1250">0,00</span> €</span></div></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Toasts
Alle ansehen: ToastsWofür du ihn nutzen kannst
Banking-, Rechnungs- und Marktplatz-Apps lassen eingehendes Geld mit etwas Bewegung gut anfühlen. Dieser Toast zeigt ein Bank-Symbol, wer gezahlt hat und wofür, sowie einen Betrag, der weich abbremsend von null hochzählt und beim Ankommen sanft grün pulsiert. Dezimal- und Tausendertrennzeichen folgen der Seitensprache.
Den Endbetrag änderst du über das data-Attribut, die Absenderzeile im HTML. Der Toast nutzt role status, und das Zählen ist schnell genug, um das Lesen nicht zu verzögern.