Maquetación

PrintSheet

Una hoja de papel para lo que se imprime o se guarda como PDF: un recibo, una factura, un certificado, una hoja de códigos de recuperación. En pantalla es una página blanca con las proporciones del papel que se encoge para caber en un teléfono; en papel es la página misma, con tinta oscura sobre blanco incluso en modo oscuro, A4 o carta, vertical u horizontal. Dos hojas son dos páginas.

import { PrintSheet } from '@alea-design/ui';

Ejemplos

Un recibo

Una hoja de papel. Tinta oscura sobre blanco incluso en modo oscuro; el código QR se imprime como debe.

Solo en papel

Queda fuera de la pantalla; cuando la persona pulsa Imprimir, la hoja es lo único que se imprime.

Configuraciones

Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.

portrait

landscape

printOnly: false

printOnly: true

letter

Orientationorientation
Print OnlyprintOnly
Sizesize

Tokens

Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.

Color

--alea-black…
--alea-white…

Radius

--alea-radius-xs…

Shadow

--alea-shadow-card…

Component

--alea-sheet-h…
--alea-sheet-w…

Props

`PrintSheet` props

Ver 10 props heredadas

Una hoja de papel para un documento que la gente imprime o guarda como PDF: un recibo, una factura, un certificado, una hoja de códigos de recuperación. En pantalla es una página blanca con las proporciones del papel que se encoge para caber en un teléfono; en papel es la página misma, siempre con tinta oscura sobre blanco aunque la app esté en modo oscuro, con el tamaño y la orientación que elegiste. Dos hojas una tras otra son dos páginas, y una más larga sigue en la página siguiente. Un QRCode dentro se imprime como debe (oscuro sobre blanco).

Prop	Tipo	Por defecto	Descripción
`children`	`ReactNode`	ninguno	Lo que va en el papel.
`orientation`	`"portrait" \| "landscape"`	`"portrait"`	portrait (por defecto, vertical) o landscape (horizontal).
`printOnly`	`boolean`	`false`	Dibuja la hoja solo en papel: queda fuera de la pantalla y, al imprimir, todo lo demás de la página se oculta. Úsalo cuando la app muestra un botón Imprimir y la hoja no es parte de la pantalla. Sin él, la hoja se ve en pantalla como una página y el resto de la página lo ocultas tú.
`size`	`"a4" \| "letter"`	`"a4"`	El papel: a4 (por defecto) o letter (carta).

Especificaciones

Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.

Variantes: orientationportraitlandscape
sizea4letter
Oscuro y claro: Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
Clases para estilos: .alea-print-sheet.alea-print-root
Atributos data: data-size=letterdata-orientation=landscapedata-size=a4

Un contenedor simple sin rol: lo que pongas dentro lleva el significado, así que usa títulos y texto reales.
Con printOnly la hoja queda fuera de la pantalla y del árbol de accesibilidad; dale al botón de imprimir un nombre que diga qué se imprime.
La tinta es siempre oscura sobre blanco, así que la página mantiene su contraste en una impresora y en una fotocopiadora, sea cual sea el tema.

Qué hacer y qué evitar

Hacer

Usa una hoja por página y deja que una más larga siga en la página siguiente.
Dale al botón de imprimir un nombre claro («Imprimir la hoja de recuperación»).
Pon un QRCode dentro cuando el papel deba escanearse: se imprime oscuro sobre blanco.

Evitar

No la uses para la versión en pantalla de un documento: eso lo hace una Card o una página.
No dependas de colores de fondo para dar significado: algunas impresoras los omiten.

En Figma

Las propiedades de los componentes de Figma, generadas desde el kit, así que siempre coinciden con él. La última columna es la prop de React que representa cada una.

`Print sheet` · 4 variantes

Propiedad de Figma	Tipo	Valores	Por defecto	Prop de React
Paper	Variant	A4, Letter	`A4`	`size`
Orientation	Variant	Portrait, Landscape	`Portrait`	`orientation`