1 / 2
Imprimir
Enviando a la impresora…
Print preview dialog
A print dialog whose page thumbnail changes size, orientation, margins and color while you adjust the options.
Settings
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>Print</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="Previous page">‹</button><span><b class="cur">1</b> / <b class="tot">2</b></span><button type="button" class="np" aria-label="Next page">›</button></p></div><div class="op"><p class="ti" id="uvq13-prt-t">Print</p><div class="f"><span class="lb" id="uvq13-prt-s">Paper</span><div class="sec" 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">Orientation</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="Portrait"><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="Landscape"><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">Margins</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">Color</span><i></i></button><div class="f"><span class="lb">Copies</span><span class="stp"><button type="button" class="dn" aria-label="Fewer copies">−</button><output class="cp">1</output><button type="button" class="up" aria-label="More copies">+</button></span></div><div class="ac"><button type="button" class="cn">Cancel</button><button type="button" class="ok">Print</button></div><p class="pr" aria-live="polite"><span>Sending to the printer…</span><i><b></b></i></p></div></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Overlays
See all OverlaysWhere to use it
Print dialogs are usually a wall of options, and this one shows the result next to every choice. The paper thumbnail morphs between A4 and Letter, portrait and landscape, dashed guides follow the margin slider, color turns the page grey and extra copies stack behind it. Arrows flip through pages and printing slides the sheet away with a progress bar. It fits invoices, reports, tickets and any export screen.
The main color sets the text of the page and the second one the accents, guides and print button. Hook the options to your real print stylesheet or PDF export, and every control works with keyboard and screen readers.