Issue #3255Opened February 1, 2021by Abhisheknanda13444633 reactions

Custom Style Manager

Question

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. How can we customize the display property


const styleManager = editor.StyleManager;
  styleManager.addSector('div-only-sector',{
    name: 'Setting',
    open: true,
    buildProps: ['width',  'height'],
    properties: [{ 
      name: 'Visibility',
      property: 'display',
      type: 'radio',
      properties: [
        {value: 'inherit', title: 'Visiblity'},
        {value: 'none', title: 'Hidden'}
       ],
    }]
 });

Demo -: https://codepen.io/abhi_punk81/pen/MWbWzaq?editors=0010

Could you Please Help @artf ? Thanks

Answers (2)

nilchu• February 1, 20213 reactions

You have to use the list property to define your options. Inside the radio option objects, it should read name instead of title.


const styleManager = editor.StyleManager;
styleManager.addSector('div-only-sector', {
    name: 'Setting',
    open: true,
    buildProps: ['width', 'height'],
    properties: [{
        name: 'Visibility',
        property: 'display',
        type: 'radio',
        list: [{
            name: 'Visibility',
            value: 'inherit'
        }, {
            name: 'Hidden',
            value: 'none'
        }]
    }]
});
Abhisheknanda1344463• February 3, 20210 reactions

Thanks A lot @nilchu for your help.

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

2 answersUpdated January 19, 2022

Issue #2989

How to append button in custom div

Hi @artf Is there any way to append all the defaults buttons of grapesjs in custom div like the same way we are append the style manager. h...

2 answersUpdated September 1, 2020

Issue #1639

[Question]: Would it be possible to have change settings under style manager in a way that it has href when a link is created?

I'm using preset newsletter with built-in RTE (do not want to use ck editor like the demo) In order to make any text to link, i need to cli...

3 answersUpdated December 12, 2019

Issue #1602

[QUESTIONS] - Panel visibility

Hey @artf , How have you been? Quick question: a Panel has a property called visible. I'm trying to set it to false but nothing happens. I'...

3 answersUpdated November 30, 2019

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

PresetsPluginsComponentsBlocksAssetsCommandsI18nLayersStylesStoragesRTENewslettersWeb pagesSite builders