Definir u ocultar propiedades para componentes específicos
No estoy seguro de si esta es la forma óptima de hacerlo, pero puedes escuchar el evento 'component:selected' y si el componente seleccionado es el que quieres, puedes añadir un sector nuevo. Luego tienes que escuchar el evento 'component:deselected' y si el component deseleccionado es el de antes de eliminar el secto...
Lee la respuesta completa abajo ↓Pregunta
Hola,
Me pregunto si existe la posibilidad de definir propiedades para componentes específicos. Quiero decir, cuando selecciono el componente 'Imagen' me gustaría que en el panel del gestor de estilos la sección relativa a 'Tipografía' no se muestre; de la misma manera, cuando selecciono un componente 'Table' me gustaría ver en el gestor de estilos una propiedad 'My Property' en el panel 'Dimension' que quiero disponible solo para el componente 'Table'. ¿Es esto posible?
¡Gracias!
Respuestas (3)
No estoy seguro de si esta es la forma óptima de hacerlo, pero puedes escuchar el evento 'component:selected' y si el componente seleccionado es el que quieres, puedes añadir un sector nuevo. Luego tienes que escuchar el evento 'component:deselected' y si el component deseleccionado es el de antes de eliminar el sector extra. Si no quieres crear todo un sector, puedes usar simplemente 'addProperty' y 'removeProperty' sobre un sector existente. Lo mismo se puede hacer para eliminar sectores de un componente específico.
editor.on('component:selected', function(component) {
if(component.attributes.tagName == 'div') {
const styleManager = editor. StyleManager;
styleManager.addSector('div-only-sector',{
nombre: 'sector solo de división',
Abierto: Cierto,
propiedades: [{ nombre: 'Esto es un div'}]
});
}
});
editor.on('component:deselected', function(component) {
if(component.attributes.tagName == 'div') {
const styleManager = editor. StyleManager;
styleManager.removeSector('div-only-sector');
}
})
De hecho, también puedes confiar en algunas propiedades de Component hechas exactamente para este propósito:
- 'estilizable' - Cierto si es posible estilizar el componente. También puedes indicar un array de propiedades CSS que sea posible estilizar, por ejemplo, ['color', 'ancho'], todas las demás propiedades estarán ocultas al gestor de estilos. Valor predeterminado: 'verdadero'
- 'no estilizable' - Indica una serie de propiedades de estilo que deben estar ocultas al gestor de estilos. Predeterminado: '[]'
- 'stylable-require' - Indica una serie de propiedades de estilo que aparecen en el Style Manager que han sido marcadas como 'toExige'. Predeterminado: '[]'
Sobre el 'stylable-require', funciona cuando configuras tu Gestor de Estilos con alguna propiedad que contiene las opciones 'aRequerir', así que estará oculto hasta que algún componente deje de necesitarlo. Por ejemplo,
'''js { nombre: 'Dimension', abierto: falso, usar buildProps para crear propiedades integradas buildProps: [ 'ancho', 'ancho flexible', 'altura', 'ancho máximo', 'altura mínima'], El ancho de flexibilidad en realidad no existe, así que extiéndelo en propiedades mediante 'ID' Propiedades: [{ id: 'flexibilidad-anchura', tipo: 'entero', nombre: 'Ancho a requisición', Unidades: ['PX', '%'], Propiedad: 'Base flexible', Esto ocultará la propiedad y solo se mostrará si algunos El componente seleccionado tendría algo como: 'estilable-requerir': ['flex-base'] Requerir: 1, }] }
@peakrams la advertencia está ahí, pero el Markdown de Github no te permite aplicar estilos personalizados para hacerlo más visible ̄\(ツ)_/ ̄
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #865
[PREGUNTA] ¿Cómo puedo establecer etiquetaName por defecto?
¡Hola! Quiero establecer el nombre de etiqueta 'tr' para todos los componentes (o componentes específicos en uso). ¿Existe alguna función p...
Issue #1021
[PREGUNTA] Sectores de Style Manager
Hola @artf, debido a la falta de documentación, me cuesta averiguar cómo añadir ajustes de componentes (rasgos) a la sección del panel del...
Issue #1241
[Pregunta]: el nuevo estilo no se refleja en el panel
Hola, En mi proyecto he sustituido el AssetManager por el mío. Sin embargo, cuando uso el nuevo gestor para actualizar la imagen de fondo d...
Issue #1709
[PREGUNTA] ¿Es posible afectar el estilismo de los componentes hijos a través del gestor de estilos del componente padre?
¡Hola! Proyecto increíble y gracias por tu aportación. Me gustaría saber si es posible cambiar el estilo de un componente hijo a través del...
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 →Tutoriales relacionados
Guías detalladas sobre el mismo tema.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.