Toast mit Tastenkürzel-Tipp
Ein Tipp mit plastischen Tasten, die sich von selbst drücken; nutzt du das Kürzel auf deiner Tastatur, leuchten sie zur Bestätigung.
Einstellungen
Code
<div class="uvq09-kbd"><button type="button" class="fire">Erneut zeigen</button><div class="tt" role="status"><small class="lb">Tipp</small><b>Erstelle sofort eine Notiz</b><button type="button" class="ks" aria-label="Kürzel Alt + N ausprobieren"><kbd class="k1"><small>⌥</small>Alt</kbd><i aria-hidden="true">+</i><kbd class="k2">N</kbd></button><small class="hn">Probier es jetzt auf deiner Tastatur</small><small class="dn">Notiz erstellt</small></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
Tipps zu Tastenkürzeln gehen als reiner Text leicht unter. Hier sind die Tasten echte Tastenkappen mit Tiefe, Legende in der Ecke und einem Schatten, der beim Drücken in einer Schleife schrumpft. Der Toast reagiert auf die echte Kombination Alt + N, und auf Touchscreens funktionieren die Tasten auch als Button. Nutze ihn fürs Onboarding, in Produktivitäts-Apps und für Hinweise an Profis.
Die Hauptfarbe lässt die Tasten leuchten, wenn das Kürzel klappt, die zweite färbt die Kappen. Ändere die Tastenprüfung im Skript und die Legenden gemeinsam und lass den Listener nur am Dokument, solange der Tipp sichtbar ist.