Redimensionable, usando unitWidth en salida px en porcentaje.

Question

Hola @artf, Gracias por crear este marco. Recientemente hice un componente personalizado basado en tu plugin flexbox. ! demo La flecha roja es el valor real del modelo. La flecha verde es lo que esperaba que fuera. ¿Es posible poner 'unitWidth' como 'px' pero la salida en 'percentual'? Esto es lo que he probadoLos separé como 2 componentes, componente 'grid', solo como contenedor que luego configura la pantalla en 'flex', componente 'column', que puse como redimensionable.conjunto redimensionab...

artf · Accepted Answer

Ah, espera, culpa mía, 'opts' es el tercero 'updateWidth(model, value, opts = {}) {' por cierto, el segundo argumento en setStyle son las opciones (por ejemplo, '{ silent: true }' para evitar activar los oyentes de cambio) y esas opciones también aparecen en la callback de tus oyentes, así que simplemente coloqué una clave personalizada 'fromPxToPerc' para saber cuándo se activa el cambio desde tu lógica personalizada

afdallah · Answer

Eres el hombre!! 👍 👍 Muchas gracias @artf.

artf · Answer

Hola @afdallah, desde el punto de vista del redimensionador tendrías que usar la opción 'updateTarget' para personalizar el objetivo, pero desafortunadamente no puedes porque ya está muy usada por el SelectCommand Así que te pediría que intentes usar esto en tu función updateWidth para evitar el bucle infinito: '''js updateWidth(model, opts = {}) { si (opts.fromPxToPerc) return; //... model.setStyle({ width: parseFloat(selectedWidth, 10) / containerWidth * 100 + '%' }, { fromPxToPerc: 1 }) //.....

Redimensionable, usando unitWidth en salida px en porcentaje.

Pregunta

Respuestas (3)

Preguntas y respuestas relacionadas

Faltan iconos de flexbox en la distribución, pero se muestran en la página de demostración de grapesjs.com.

Fabricante de componentes Vuejs

Cómo renderizar un componente en el lienzo usando un rasgo.

¿Cómo ocultar el bloqueo de vídeo?

Plugins de pago que cumplen con este problema

Tutoriales relacionados

🚀 Introducing GrapesJS Email Blocky: The Ultimate Email Block Library for GrapesJS

Explorar categorías de plugins