Teilen-Blatt
Ein Blatt, das von unten hochgleitet, mit Kontakten, Apps und einem Link-kopieren-Button mit Bestätigung.
Einstellungen
Code
<div class="uv-osh"><div class="pg" aria-hidden="true"><i class="h"></i><i></i><i></i><i></i><i></i><i class="s"></i></div><button type="button" class="fire">Teilen</button><div class="scr"></div><div class="sh" role="dialog" aria-modal="true" aria-label="Teilen"><i class="gr" aria-hidden="true"></i><div class="hd"><span class="th" aria-hidden="true"></span><span><b>Wanderung in den Picos de Europa</b><small>rutas.app/picos</small></span></div><div class="pp"><button type="button"><span class="av" style="--c:#f97316">A</span>Ana</button><button type="button"><span class="av" style="--c:#3b82f6">L</span>Leo</button><button type="button"><span class="av" style="--c:#ec4899">S</span>Sara</button><button type="button"><span class="av" style="--c:#10b981">I</span>Iván</button><button type="button"><span class="av" style="--c:#a855f7">N</span>Noa</button></div><div class="ap"><button type="button"><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="M5 17.5V7a2.5 2.5 0 0 1 2.5-2.5h9A2.5 2.5 0 0 1 19 7v6a2.5 2.5 0 0 1-2.5 2.5H9z"/></svg>Nachrichten</button><button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="3"/><path d="M4 7l8 6 8-6"/></svg>Mail</button><button type="button" class="cp"><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="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1"/></svg><span class="a">Link kopieren</span><span class="b">Kopiert</span></button><button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="5" cy="12" r="1.3" fill="currentColor"/><circle cx="12" cy="12" r="1.3" fill="currentColor"/><circle cx="19" cy="12" r="1.3" fill="currentColor"/></svg>Más</button></div></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 Overlays
Alle ansehen: OverlaysWofür du ihn nutzen kannst
Teilen klappt am besten, wenn die wahrscheinlichsten Ziele einen Tipp entfernt sind. Dieses Blatt gleitet mit Griff von unten hoch, zeigt eine Vorschau des geteilten Inhalts, eine Reihe letzter Kontakte mit farbigen Avataren und eine Reihe Aktionen für Nachrichten, Mail, Link kopieren und mehr. Beim Kopieren wird der Button grün und bestätigt.
Es ist ein modaler Dialog, der den Fokus beim Öffnen hineinsetzt und mit Escape oder Tipp auf den Hintergrund schließt. Die Reihen scrollen auf kleinen Bildschirmen horizontal, die Hauptfarbe tönt die Aktionssymbole.