Issue #2825💬 RespondidoAbierto el 11 de junio de 2020por Leozinho0Reacciones 2

¿Cómo añado el archivo CSS de mis clases cuando uso componentes?

Respuesta rápidapor RJCAM1

Hola, @Leozinho0 Puedes hacerlo así:

Lee la respuesta completa abajo ↓

Pregunta

Tengo este componente:

editor. BlockManager.add('rodape', { etiqueta: '3 Colunas', Contenido: { etiquetaNombre: 'div', Arrastrable: Cierto, atributos: { clase: 'row' }, estilo: { 'pantalla': 'flexión', 'justificar-contenido': 'arranque flexible', 'alinear-ítems': 'estirar', 'flex-wrap': 'nowrap', 'acolchado': '10px', }, Contenido: 'LALA' } });

Quiero usar la clase ROW, pero ¿dónde defino esta clase? Cuando arrastro este bloque de componentes dentro del lienzo, el CSS de la clase ni siquiera se carga.

Respuestas (3)

RJCAM11 de junio de 2020

Hola, @Leozinho0 Puedes hacerlo así:

editor. BlockManager.add('rodape', {
    etiqueta: '3 Colunas',
    atributos: {
        título: 'Insertar bloque h1',
        Clase: 'GJS-Fonts GJS-F-B1',
    },
    Contenido: '<div class="minha_classe">lala</div>
            <style>
                .minha_classe {
                    pantalla: flex;
                    Justificar-contenido: Inicio flexible;
                    Alinear-ítems: estiramiento;
                    Flex-wrap: sin wrap;
                    relleno: 10px;
                }
            ',</style>
});
RJCAM12 de junio de 2020

De hecho, el código que te doy funciona, para ver a qué me refiero, prueba esto:

  1. Coloca un componente creado a medida en Canvas, como has dicho no cargará el estilo ".row" de CSS
  2. Ahora suelta cualquier bloque de columna dentro del lienzo, y ahora verás que el css ".row" está cargado.

Esto se debe a que los estilos están dentro del propio bloque y solo se renderizan cuando dejas caer el bloque de columna en el lienzo. Puedes comprobar, imprimiendo esto en la consola, que el html y el css del componente están hechos como el código que te doy en mi primer comentario. 'Editor. BlockManager.get("column3").attributes.content'

Leozinho011 de junio de 2020

Hola. Gracias por responder. No funciona.

Si compruebas https://grapesjs.com/demo.html cuando añades un componente (por ejemplo: 3 columnas) y haces clic para exportar el html, verás que carga las clases .row y .cell.

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.