Issue #2724✓ ResueltoAbierto el 21 de abril de 2020por jozue06Reacciones 2

Páginas en un solo lienzo

Respuesta rápidapor Ju99ernaut2

Puedes utilizar las propiedades css break-before o break-after. Quizá puedas crear un bloque de quiebre de página que añadas manualmente después de cada página, echa un vistazo a grapesjs-plugin-page-break, o puedes romper antes o después de cierto elemento.Siempre salto de página antes del <h1>elemento '', referencia...

Lee la respuesta completa abajo ↓

Pregunta

Hola, no estoy seguro de dónde debería ir exactamente esto, pero allá voy.

Estoy creando un generador para hacer menús largos para restaurantes que se imprimirán.

Mi pregunta es, ¿alguien tiene algún ejemplo curioso de cómo hacer un cuadro delimitador del tamaño de una página para cada página de un "menú"?

Digamos que tengo 150 tipos de cerveza. Me gustaría que cada página contenga una cierta cantidad de contenido, luego saltar a la siguiente página y que eso sea visible en el lienzo, básicamente tomando la demo del boletín, y en lugar de desplazamiento infinito, hacer que una sección dentro del lienzo <body> tenga varias secciones de "página" de cierto tamaño.

Si no hay ejemplos o ideas, ¿por dónde sería un buen punto de partida aparte de los documentos de primer nivel de Grapejs?

¡Gracias a todos!

Respuestas (1)

👍 Muy útilJu99ernaut28 de abril de 2020

Puedes utilizar las propiedades css break-before o break-after. Quizá puedas crear un bloque de quiebre de página que añadas manualmente después de cada página, echa un vistazo a grapesjs-plugin-page-break, o puedes romper antes o después de cierto elemento.

Siempre salto de página antes del <h1>elemento '', referencia '''css @media print{ h1 {break-before: always;} }

>Siempre salto de página tras <footer>elemento '', [referencia](https://www.w3schools.com/cssref/pr_break-after.asp)
'''css
@media print{
   pie de página {break-after: always}
}

Preguntas y respuestas relacionadas

Continúa investigando con debates sobre temas similares.

Plugins de pago que cumplen con este problema

Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.

Ver todos los plugins

Cargando recomendaciones de plugins de pago...

Opción gratuita

Consulta los plugins de código abierto de GrapesJS en GitHub O haz una búsqueda rápida en nuestro catálogo gratuito.

Explora plugins gratuitos →
Opción premium

Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.

Explora plugins premium →

Explorar categorías de plugins

Ve directamente a las páginas de categorías de plugins en el marketplace.