Style Manager Issue.
Question
Hi @artf I want to hide and show style properties for specific component. After referencing this issue https://github.com/artf/grapesjs/issues/1428
I've write my code this way but it's giving me error -:
export default (editor, config) => {
const sm = editor.StyleManager;
const csm = config.customStyleManager;
// Show Style when shape Divider
editor.on('component:selected', function(component) {
if(component.attributes.type == 'shape-divider') {
sm.addSector('style_options',{
name: 'Style Options',
open: true,
buildProps: ['display','width', 'height', 'color'],
properties: [{
name: 'Visibility',
property: 'display',
type: 'radio',
list: [{
name: 'Visibility',
value: 'inherit'
}, {
name: 'Hidden',
value: 'none'
}],
},{
name: 'Fill Color',
property: 'color'
}]
});
sm.removeSector('layout');
});
editor.on('component:deselected', function(component) {
if(component.attributes.type === 'shape-divider') {
sm.removeSector('style_options');
sm.addSector('layout');
}
})
Could you please help @artf ?
after doing this sm.removeSector('layout'); It's not finding the "style sector" (Layout) object.
What is best possible solution in this case because for shape divider i want to show the specific sector.
Answers (3)
Hi @Abhisheknanda1344463 did you try to follow my indications here? You don't need to add/remove sectors on each select just play with component properties
@artf I've tried that but if i do like this https://github.com/artf/grapesjs/issues/1428#issuecomment-421640559 then it'll show the style sectors in which that properties are present. I want to show my custom only one style sector for specific component like one i've mentioned above. Don't know if you understand my use case. Please Guide me. Thanks
Here a quick example of usage:
const plugin = (editor) => {
const { Components, Blocks, Styles } = editor;
[
{
type: 'simple',
props: {
components: 'Simple component',
},
},{
type: 'special',
props: {
components: 'Special component',
'stylable-require': ['special-style'], // <- this component requires special styles
},
}
].forEach(({ type, props }) => {
Components.addType(type, {
model: {
defaults: props,
}
});
Blocks.add(type, {
label: type,
content: { type },
});
});
Styles.addSector('special',{
name: 'Special sector',
open: true,
properties: [
{
id: 'special-style',
type: 'color',
name: 'My property',
property: 'color',
toRequire: true, // <- This property will show up only if requested by component
}
]
}, { at: 0 });
}
const editor = grapesjs.init({
container: '#gjs',
fromElement: 1,
height: '100%',
storageManager: false,
plugins: [plugin]
});
https://jsfiddle.net/1tvrLqem/1/ As you can see the sector will hide if there are no properties to show
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3058
How to modify existing block properties in style manager
Version: 0.15.9 How to modify/remove few CSS properties for existing blocks like(text, image) in style manager I have checked the following...
Issue #3444
removeButton() causing error
Hi, I'm trying to remove a button from panel using this code editor.Panels.removeButton('options', 'fullscreen') . It removes the button bu...
Issue #1842
Showing two times some properties and not showing some options too.
Hello, @artf @NicoEngler, I have one strange issues. I am using grapes.js and grapes.min.css with version of 0.14.50. While i am selecting...
Issue #3130
[Question] Standard approach in slight restructuring the HTML toolbar & badge
Version: 0.15.10 This question is intended to validate if there is a proper way to extend the current https://github.com/artf/grapesjs/blob...
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.