A medida que creas un diseño, es posible que desees que parte del contenido fluya continuamente, que un bloque permanezca unido o que una nueva parte comience en su propia hoja. Tembuilder le permite combinar estos enfoques dentro de la misma plantilla.
Establezca el comportamiento de paginación para cada sección en Config → Saltos de página. Esta guía cubre aquellas opciones, tablas largas y reglas CSS que pueden afectar los saltos de página.
1. Abra la configuración de salto de página de una sección
Seleccione la sección en Structure, luego abra Config → Saltos de página. Hay dos controles:
- Mantener juntos: si la sección se puede dividir en hojas PDF.
- Salto de página: si se debe forzar un salto antes o después de la sección.
Los controles son independientes. Una sección puede comenzar en una hoja nueva y continuar en varias hojas cuando su contenido es extenso.
Para una tabla o lista con un número variable de filas, comience con Mantener juntos: Desactivado y Salto de página: Ninguno para permitir que el contenido fluya.
2. Mantenga un bloque de contenido junto
Utilice Mantener juntos: activado para una sección breve que debe permanecer intacta, como una firma, detalles de pago o un resumen. Si el espacio restante es demasiado pequeño, la sección pasa a la siguiente hoja.
Utilice Desactivado para una tabla o lista larga que deba continuar en todas las hojas. Mantener toda la tabla junta puede dejar un gran espacio en la hoja anterior.
La configuración se aplica a toda la sección. Para mantener junta solo la firma, conviértala en una sección separada en lugar de habilitar Activado para una sección que contenga toda la tabla de servicios.
3. Elige dónde comienza una nueva sección
Utilice Salto de página para separar partes del documento, como comenzar los términos en una hoja nueva después de una factura.
| Opción | Comportamiento |
|---|---|
| Ninguno | No fuerces un descanso antes o después de la sección. |
| Antes | Inicie esta sección en una hoja nueva cuando el contenido la preceda. |
| Después | Comience la siguiente sección en una hoja nueva. |
| Ambos | Divida antes y después de la sección cuando exista contenido en ambos lados. |
Ambos no limita la sección a una hoja. Mantener juntos aún controla la división dentro de la sección.
Un corte en el límite de una página existente no agrega una hoja en blanco. Por ejemplo, Antes en la primera sección no inserta una hoja en blanco antes del documento.
4. Deje que las tablas largas continúen a lo largo de las hojas.
Establezca Mantener juntos: Desactivado en la sección que contiene la tabla. Utilice <thead> for the header and <tbody> for data rows. The <thead>el encabezado se repite cuando la tabla continúa en otra hoja.
Para las filas de servicios, genere el contenido de la tabla a partir de params.lineItems:
<table>
<thead>
<tr><th>Service</th><th>Quantity</th><th>Amount</th></tr>
</thead>
<tbody>
{{#each params.lineItems}}
<tr>
<td>{{ description }}</td>
<td>{{ qty }}</td>
<td>{{ amount }}</td>
</tr>
{{/each}}
</tbody>
</table>
Para colocar los totales después de la fila final de la tabla, colóquelos después de la tabla o en la siguiente sección con Salto de página: Ninguno. Para mantener los totales intactos, habilite Mantener juntos solo en la sección de totales.
Consulte Matrices y objetos para obtener más información sobre cómo pasar listas a una plantilla.
5. Cuando el contenido se recorta o se mueve como un bloque
Estos síntomas suelen indicar diferentes escenarios:
| Síntoma | Dónde buscar |
|---|---|
| Una sección completa pasa a la siguiente hoja, dejando un gran espacio | La configuración Mantener juntos de la sección y break-inside en su contenedor. |
| Las últimas filas desaparecen en el borde del contenedor | CSS height, max-height y overflow del contenedor. |
| Una sección siempre comienza en una hoja nueva a pesar del espacio disponible | Su Salto de página: Antes/Ambos, Después en la sección anterior, o CSS break-before. |
Por ejemplo, un contenedor .items con altura fija y overflow: hidden sujeta cualquier cosa que esté más allá de su caja. Si crece con la lista, elimine el límite de altura y permita contenido visible, como se ilustra a continuación.
Config controla la sección en sí. Los elementos dentro de él aún pueden tener sus propias reglas de ruptura CSS, así que inspeccione si cambiar Config no cambia el resultado.
.items {
height: 120px;
overflow: hidden;
}.items {
height: auto;
overflow: visible;
}