[QUESTION] How to customize StyleManager input components?
Question
The demo version on GrapesJS site has some custom style input components (i.e. opacity slider, "undo" button by the property name...) How is this achieved? Is there anyway I can use them with my own plugin?
Also how do I get my custom sector properties to behave like the buildProps? In my case I have to translate all strings, so I can't use buildProps, but the custom props don't behave like the buildProps does. They are not taking the components attribute initial value on component:selected as the buildProps does, color picker doesn't show onClick and so on.
Answers (1)
The demo version on GrapesJS site has some custom style input components (i.e. opacity slider, "undo" button by the property name...) How is this achieved? Is there anyway I can use them with my own plugin?
Those are part of the configuration.
For property clearing use this option
styleManager: { clearProperties: 1 },
The opacity is built using the slider type, here is the part from the source of the demo
https://github.com/artf/grapesjs/blob/53cfe888a0ee5d49c43cd4e3fa5daf0b55f8277c/demo.html#L1101-L1108
Also how do I get my custom sector properties to behave like the buildProps? In my case I have to translate all strings, so I can't use buildProps, but the custom props don't behave like the buildProps does. They are not taking the components attribute initial value on component:selected as the buildProps does, color picker doesn't show onClick and so on.
You can translate the strings by extending buildProps
Take a look at the demo source
https://github.com/artf/grapesjs/blob/53cfe888a0ee5d49c43cd4e3fa5daf0b55f8277c/demo.html#L1036-L1052
As you see I change the default labels of properties like margin/padding by extending them in properties (using property or id as an identifier).
You can also see the flex-width which is totally custom and placed there just to make use of buildProps for other built-in properties
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2586
[Question]: How update style manager panel using few devices and custom css class
There is a custom class added to simple grapesjs project: If there is no devices and user adds the class into the selectors field Settings...
Issue #3255
Custom Style Manager
Hi @artf I am trying to change the type and input values of display property like this way -: But on style-manager Button are not visible....
Issue #2388
[Question] - How to import styles from <link> to be rendered when dragging block to canvas
My situation: I'm slowly importing some of my custom made UI components in ReactJS to GrapesJS. Now, I am able to render the component prop...
Issue #954
[Question] Drag&drop of button on demo has additional css attributes
Hi, On the newsletter demo, when drag&dropping a button, some additional css attributes are added to the <a>. It seems like they come from...
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.