Issue #1353✓ ResueltoAbierto el 9 de agosto de 2018por emilsedghReacciones 2

Tipo de propiedad de casilla de verificación

Respuesta rápidapor jmrgz2

Oh, perdona, acabo de encontrar justo lo que necesitas. Podrías probar una solución de jquery sucia mientras esperas, usando 2 botones de radio con los diferentes estados de encendido/apagado y mostrar/ocultar todos los botones cuando los necesites.

Lee la respuesta completa abajo ↓

Pregunta

Me interesa desarrollar un tipo de propiedad "casilla de verificación" (toggle) para el gestor de estilos.

Básicamente sería como la radio, excepto que es singular y se puede apagar.

El caso de uso es este:

Quiero tener un icono en negrita. Si se activa activada, se aplica 'denso-fuente: negrita', de lo contrario aplica 'peso-fuente: normal'.

Igual que el RTE por defecto. Excepto que quiero que esté en el responsable de estilo.

¿Aceptaríais eso en uvas? ¿Debería llamarlo 'PropertyToggle' o 'PropertyCheckbox'?

Respuestas (3)

👍 Muy útiljmrgz9 de agosto de 2018

Oh, perdona, acabo de encontrar justo lo que necesitas. Podrías probar una solución de jquery sucia mientras esperas, usando 2 botones de radio con los diferentes estados de encendido/apagado y mostrar/ocultar todos los botones cuando los necesites.

jmrgz9 de agosto de 2018

Si te he entendido, estás intentando crear un botón nuevo como los otros en "decoración de texto" en https://grapesjs.com/demo.html

No tengo decoración de texto en mi proyecto, pero sí botones de alineación de texto que funcionan igual. Este debería ser el código que crea los botones de alineación de texto en el gestor de estilos.

Fragmento de códigoTEXT
Fíjate que puede que ya tengas una propiedad de peso de fuente, así que si la añades como botón de opción, tendrás que eliminar el desplegable por defecto.

`    
                    Propiedades: [{
                        propiedad: "text-align",
                        lista: [{
                            valor: "izquierda",
                            claseNombre: "fa fa-align-left"
                        }, {
                            valor: "centro",
                            claseNombre: "fa fa-align-center"
                        }, {
                            valor: "correcto",
                            claseNombre: "fa fa-align-right"
                        }, {
                            valor: "justificar",
                            NombreClase: "fa fa-align-justify"
                        }]
                    }]
........
`    

`
                            Caso "Text-align":
                                r.type = "radio";
........
`

`
                            Caso "Text-align":
                                r.list = [{
                                    valor: "izquierda"
                                }, {
                                    Valor: "Center"
                                }, {
                                    Valor: "Correcto"
                                }, {
                                    Valor: "Justificar"
                                }];
                                pausa;
`
emilsedgh9 de agosto de 2018

Tu ejemplo ofrece un botón radio con varias opciones.

Quiero botones únicos para activar/apagar.

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.