PREGUNTA: ¿Hay alguna forma de usar diferentes variantes del mismo estilo de propiedad?
No creo que sea posible usando la API, ¿y funciona 'alineación de texto' para componentes que no son texto? Probablemente querrás usar la propiedad 'align-content' de 'flexbox'
Lee la respuesta completa abajo ↓Pregunta
Nota: Esto es en el contexto del Style Manager.
¿Hay alguna forma de usar diferentes variantes de la misma propiedad de estilo?
Por ejemplo, cuando uso la propiedad text-align en un componente nodo que no es text, me gustaría que la etiqueta dijera "Align Content" con las opciones "izquierda", "derecha" y "centro". Sin embargo, cuando se muestra la propiedad "alinear texto" para un nodo de texto, me gustaría que la etiqueta dijera "Alinear texto" con las opciones "izquierda", "derecha", "centro" y "justificar".
He buscado en la documentación y los problemas en GitHub y no consigo encontrar ninguna respuesta.
¿Alguien sabe cómo lograrlo?
¡Gracias de antemano!
Respuestas (3)
No creo que sea posible usando la API, ¿y funciona 'alineación de texto' para componentes que no son texto? Probablemente querrás usar la propiedad 'align-content' de 'flexbox'
Deberías intentar usar la propiedad 'stylable-require' de Component para mostrar la propiedad de estilo particular (marcada con 'aRequerir') y 'no estilizable' para la que no necesitas. '''js editor. Components.addType('...', { modelo: { Predeterminados: { 'stylable-require': ['align-content'], no estilizado: ['alineación-texto'], } } });
en tu configuración de StyleManager buildProps: [..., 'text-align', 'align-content'], Propiedades: [{ // ... Propiedad: 'Aline-contenido', toRequire: true, // <-- Así que esta propiedad quedará oculta si el componente no la requiere }]
@artf Gracias por tu respuesta.
En este caso, seguiría teniendo problemas usando la propiedad 'align-content' con columnas y filas flexibles. Para las columnas, me gustaría que las opciones fueran: 'Arriba', 'Centro' y 'Abajo', y para las filas que las opciones fueran: 'Izquierda', 'Centro' y 'Derecha'.
Mis usuarios no están muy familiarizados con CSS, y mucho menos con flexbox, y usar 'Iniciar', 'Centrar' y 'Fin' no será tan buena experiencia de usuario como me gustaría.
¿Tienes alguna otra sugerencia?
Gracias, Josh
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #2076
[PREGUNTA] ¿Cómo crear un nuevo componente que permita directivas de la hoja Laravel?
Hola, gracias por el buen trabajo. Me gustaría saber si hay alguna forma de usar las directivas de las cuchillas dentro del código. Ya añad...
Issue #3086
BUG: Cómo restringir las propiedades del style manager basándose en el componente
Versión: 0.15.9 ¿Cuál es el comportamiento esperado? Cada vez que algún componente arrastra y suelta en la parte de constructor, las propie...
Issue #1960
[PREGUNTA] Generación dinámica de clases con una plantilla
¡Hola! Me pregunto si hay alguna forma de forzar la generación dinámica de clases (de la forma 'cXXXXX', que ocurre al arrastrar y soltar u...
Issue #1841
Nombre de los componentes
Tengo dos preguntas.¿Hay alguna forma de cambiar el nombre del componente integrado? Quería cambiar el nombre "Box" por "Div". Así que el m...
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.