Teilen-Button mit Fächermenü
Der Teilen-Button fächert vier Ziele im Bogen mit gestaffelter Federung auf; Pfeiltasten wechseln zwischen ihnen, Escape klappt sie wieder ein.
Einstellungen
Code
<div class="uvq15-shr"><div class="fan"><button type="button" class="it" tabindex="-1" style="--i:0;--x:-4.83em;--y:-1.29em" aria-label="Link kopieren" data-m="Link kopiert"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 14a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1"/><path d="M14 10a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1"/></svg></button><button type="button" class="it" tabindex="-1" style="--i:1;--x:-2.11em;--y:-4.53em" aria-label="Mail" data-m="E-Mail wird geöffnet…"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></button><button type="button" class="it" tabindex="-1" style="--i:2;--x:2.11em;--y:-4.53em" aria-label="Nachricht" data-m="Nachrichten werden geöffnet…"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12Z"/></svg></button><button type="button" class="it" tabindex="-1" style="--i:3;--x:4.83em;--y:-1.29em" aria-label="QR-Code" data-m="QR-Code bereit"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><path d="M14 14h3v3h-3zM20 14v.01M14 20h.01M17 20h4v-3"/></svg></button><button type="button" class="mn" aria-expanded="false" aria-label="Teilen"><span class="oder"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="m8.6 13.5 6.8 4M15.4 6.5l-6.8 4"/></svg></span><span class="x"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></span></button></div><p class="tt" aria-live="polite"></p></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 Mikrointeraktionen
Alle ansehen: MikrointeraktionenWofür du ihn nutzen kannst
Teilen-Menüs öffnen oft ein ganzes Panel, obwohl es nur eine Handvoll Optionen gibt. Dieses bleibt kompakt: Der runde Teilen-Button wird zum Schließen-Symbol, und vier Ziele fächern sich darüber im Bogen auf, eines nach dem anderen mit federndem Überschwingen. Jedes hat einen Tooltip, und nach der Auswahl erscheint darunter eine kurze Bestätigung.
Die Hauptfarbe gilt für den Auslöser, die Zweitfarbe hebt die aktive Option hervor. Die Positionen ergeben sich aus Winkel und Radius im Markup, ein fünftes Ziel braucht also nur einen weiteren Button. Link kopieren legt die Seitenadresse in die Zwischenablage.