Issue #2990💬 RespondidoAbierto el 1 de septiembre de 2020por JoshmamroudReacciones 0

PREGUNTA: ¿Hay alguna forma de usar diferentes variantes del mismo estilo de propiedad?

Respuesta rápidapor Ju99ernaut

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)

Ju99ernaut5 de septiembre de 2020

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'

artf8 de septiembre de 2020

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 }]

Joshmamroud8 de septiembre de 2020

@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.

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.