[Feature Request] Checkbox property type
Question
I'm interested in developing a "checkbox" (toggle) property type for the style manager.
Basically it'd be like the radio, except that it's singular and can be turned on off.
Use case is this:
I want to have a Bold icon. If toggled on, it applies font-weight: bold otherwise applies font-weight: normal.
Just like the default rte. Except that I want it in the style manager.
Would you guys accept that in grapes? Should I call it PropertyToggle or PropertyCheckbox?
Answers (3)
Oh, sorry, I just got right what you need now. You could try a dirty jquery solution while waiting, using 2 radio buttons with the different on/off states and show/hide every button when you need it.
If I understood you ok, you are trying to create a new button like the others under "text-decoration" in https://grapesjs.com/demo.html
I do not have text decoration in my project, but I have text-align buttons that work the same. This should be the code that creates the text-align buttons in the style manager.
Notice that you may already have a font-weight property, so if you add it as a radio button, you will need to remove the default dropdown.
`
properties: [{
property: "text-align",
list: [{
value: "left",
className: "fa fa-align-left"
}, {
value: "center",
className: "fa fa-align-center"
}, {
value: "right",
className: "fa fa-align-right"
}, {
value: "justify",
className: "fa fa-align-justify"
}]
}]
........
`
`
case "text-align":
r.type = "radio";
........
`
`
case "text-align":
r.list = [{
value: "left"
}, {
value: "center"
}, {
value: "right"
}, {
value: "justify"
}];
break;
`Your example provides a radio button of a few choices.
I want single toggle on/off buttons.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1577
Inline CSS Comments break Code Manager
Apparently this is valid piece of html and css: <div style="color: red; / height 200px; /; font-weight: bold;"> (Hence the commented out he...
Issue #3067
FEAT: remove 'display: block' inline style from Style Manager sectors and properties
What are you trying to add to GrapesJS? Improve visibility for Style Manager sectors and properties. Describe your feature request detailed...
Issue #1096
[FEATURE REQUEST] Support rendering layouts which are not part of the editable content
Basically my use case is that I want to show a whole page - with header, menu(s) and footer - in the editor canvas, but only allow the user...
Issue #3525
FEAT: In Style Manager, Allow Requiring the Default Setting
What are you trying to add to GrapesJS? The CSS property float only makes sense for position: static; elements, which happens to be the def...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.