Recibidos
- Carmen GilPresupuesto de la reforma
- Pablo RuizFotos del viaje9:12
- Marta LeónEntradas del concierto8:05
Menü zum Zurückstellen einer E-Mail
Die Uhr einer E-Mail öffnet ein Menü mit Zeitpunkten, je mit Mini-Himmel und echter Uhrzeit in deiner Sprache; die Wahl blendet die Mail aus.
Einstellungen
Code
<div class="uvq13-snz"><p class="hh">Posteingang</p><ul class="ib"><li class="r on"><span class="av" style="--c:#f97316" aria-hidden="true">C</span><span class="tx"><b>Carmen Gil</b><span>Angebot für die Renovierung</span></span><span class="ha"><button type="button" class="ar" aria-label="Archivieren"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7.5h16v-3H4zM5.5 7.5V19h13V7.5M10 11.5h4"/></svg></button><button type="button" class="fire" aria-haspopup="menu" aria-label="Zurückstellen"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="13" r="7.5"/><path d="M12 9.5V13l2.5 1.5M4.5 4.5l2.5-2M19.5 4.5l-2.5-2"/></svg></button></span></li><li class="r"><span class="av" style="--c:#0ea5e9" aria-hidden="true">P</span><span class="tx"><b>Pablo Ruiz</b><span>Reisefotos</span></span><small>9:12</small></li><li class="r"><span class="av" style="--c:#e11d48" aria-hidden="true">M</span><span class="tx"><b>Marta León</b><span>Konzertkarten</span></span><small>8:05</small></li></ul><div class="po" role="menu" aria-label="Zurückstellen bis…"><p class="pt" aria-hidden="true">Zurückstellen bis…</p><button type="button" role="menuitem" class="op" data-k="ev"><i class="sk ev" aria-hidden="true"></i><span>Später heute</span><small></small></button><button type="button" role="menuitem" class="op" data-k="tm"><i class="sk tm" aria-hidden="true"></i><span>Morgen früh</span><small></small></button><button type="button" role="menuitem" class="op" data-k="we"><i class="sk we" aria-hidden="true"></i><span>Dieses Wochenende</span><small></small></button><button type="button" role="menuitem" class="op" data-k="nw"><i class="sk nw" aria-hidden="true"></i><span>Nächste Woche</span><small></small></button><button type="button" role="menuitem" class="op" data-k="pk"><i class="sk pk" aria-hidden="true"></i><span>Datum und Uhrzeit wählen</span><small></small></button><div class="cu"><div class="dy"></div><div class="hs"><button type="button" aria-pressed="true">8:00</button><button type="button" aria-pressed="false">13:00</button><button type="button" aria-pressed="false">18:00</button></div><button type="button" class="sv">Zurückstellen</button></div></div><p class="tst" aria-live="polite"><span class="m"></span><button type="button" class="un">Rückgängig</button></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 Overlays
Alle ansehen: OverlaysWofür du ihn nutzen kannst
Eine E-Mail zurückzustellen ist eine kleine Entscheidung, die ein klares Menü verdient. Die Uhr in der markierten Zeile öffnet ein Popover mit später heute, morgen, am Wochenende und nächste Woche, jeweils mit einem winzigen Himmel, dessen Sonne zu dieser Stunde steht, und einer Uhrzeit in der Seitensprache per Intl. Eine eigene Option öffnet Chips für Tag und Uhrzeit. Nach der Wahl verschwindet die Zeile und eine Rückgängig-Leiste erscheint.
Die Hauptfarbe ist der aktive Zustand, die zweite der Rückgängig-Link. Die Beschriftungen werden aus dem echten Datum berechnet und stimmen daher jeden Tag, das Menü funktioniert mit Pfeiltasten, Enter und Escape.