¿Cómo añado el archivo CSS de mis clases cuando uso componentes?
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)
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>
});
De hecho, el código que te doy funciona, para ver a qué me refiero, prueba esto:
- Coloca un componente creado a medida en Canvas, como has dicho no cargará el estilo ".row" de CSS
- 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'
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.
Issue #1034
Insertar elemento o bloque dentro del elemento padre
Buenos días, tengo componente, tengo bloqueo tengo Trait en los cambios de escucha, ¿cómo puedo añadir "h1" dentro de ese bloque "''<div cl...
Issue #1545
[Pregunta] ¿Cómo consigo identificación de Block?
Hola, tengo mi bloque y recibo resultados de impresión en Div ID de mi componente de clase javascript... ¿Cómo consigo identificación de mi...
Issue #792
La propiedad de script usando función no funciona con bloques
En la documentación de Componentes & JS hay este ejemplo: Esto funciona perfectamente. Pero no podría usar una función en lugar de una cade...
Issue #1584
No obtengo el script de bloque de editor.getComponents()
A continuación está el componente que voy a añadir.this.editor.BlockManager.add('dob-mmyy-pii', { id: 'dob-mmyy', etiqueta: 'FECHA DE NACIM...
Plugins de pago que cumplen con este problema
Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.
Cargando recomendaciones de plugins de pago...
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 →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.