1 / 2
Imprimir
Enviando a la impresora…
Druckvorschau-Dialog
Ein Druckdialog, dessen Seitenvorschau Format, Ausrichtung, Ränder und Farbe ändert, während du die Optionen einstellst.
Einstellungen
Code
<div class="uvq13-prt"><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" aria-haspopup="dialog"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 9V3.5h10V9M7 17H4.5V9h15v8H17M7 14h10v6.5H7z"/></svg><span>Drucken</span></button><div class="scr"></div><div class="dl" role="dialog" aria-modal="true" aria-labelledby="uvq13-prt-t" tabindex="-1"><div class="pv"><div class="sheet"><div class="pc"><i class="h"></i><i></i><i></i><i class="s"></i><i class="im"></i><i></i><i></i><i class="s"></i></div><span class="mg" aria-hidden="true"></span></div><p class="pgn"><button type="button" class="pp" aria-label="Vorherige Seite">‹</button><span><b class="cur">1</b> / <b class="tot">2</b></span><button type="button" class="np" aria-label="Nächste Seite">›</button></p></div><div class="op"><p class="ti" id="uvq13-prt-t">Drucken</p><div class="f"><span class="lb" id="uvq13-prt-s">Papier</span><div class="Sek." role="radiogroup" aria-labelledby="uvq13-prt-s"><button type="button" role="radio" aria-checked="true" data-v="a4">A4</button><button type="button" role="radio" aria-checked="false" data-v="lt">Letter</button></div></div><div class="f"><span class="lb" id="uvq13-prt-o">Ausrichtung</span><div class="seg or" role="radiogroup" aria-labelledby="uvq13-prt-o"><button type="button" role="radio" aria-checked="true" data-v="p" aria-label="Hochformat"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="6.5" y="3.5" width="11" height="17" rx="1.5"/></svg></button><button type="button" role="radio" aria-checked="false" data-v="l" aria-label="Querformat"><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.5" y="6.5" width="17" height="11" rx="1.5"/></svg></button></div></div><div class="f fm"><label class="lb" for="uvq13-prt-m">Ränder</label><output>15 mm</output><input id="uvq13-prt-m" type="range" min="0" max="30" step="5"></div><button type="button" class="f tg" role="switch" aria-checked="true"><span class="lb">Farbe</span><i></i></button><div class="f"><span class="lb">Kopien</span><span class="stp"><button type="button" class="dn" aria-label="Weniger Kopien">−</button><output class="cp">1</output><button type="button" class="up" aria-label="Mehr Kopien">+</button></span></div><div class="ac"><button type="button" class="cn">Abbrechen</button><button type="button" class="ok">Drucken</button></div><p class="pr" aria-live="polite"><span>Wird an den Drucker gesendet…</span><i><b></b></i></p></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
Druckdialoge sind meist eine Wand aus Optionen, dieser zeigt das Ergebnis neben jeder Wahl. Die Papiervorschau wechselt zwischen A4 und Letter, Hoch- und Querformat, gestrichelte Hilfslinien folgen dem Randregler, Farbe aus macht die Seite grau und weitere Kopien stapeln sich dahinter. Pfeile blättern durch die Seiten, und beim Drucken gleitet das Blatt mit Fortschrittsbalken davon. Passt zu Rechnungen, Berichten, Tickets und Exportansichten.
Die Hauptfarbe bestimmt die Schrift der Seite, die zweite Akzente, Hilfslinien und Druckbutton. Verbinde die Optionen mit deinem Druck-Stylesheet oder PDF-Export, alle Bedienelemente funktionieren mit Tastatur und Screenreader.