How to handle more sector of traits
At the moment you can render only one container of traits, so you can't split them
Read full answer below ↓Question
I want to add more Structure sector as below :
// Add Settings Sector
var traitsSector = $('<div class="gjs-sm-sector no-select">'+
'<div class="gjs-sm-title"><span class="icon-settings fa fa-cog"></span> Settings</div>' +
'<div class="gjs-sm-properties" style="display: none;"></div></div>');
var traitsProps = traitsSector.find('.gjs-sm-properties');
traitsProps.append($('.gjs-trt-traits'));
$('.gjs-sm-sectors').before(traitsSector);
traitsSector.find('.gjs-sm-title').on('click', function(){
var traitStyle = traitsProps.get(0).style;
var hidden = traitStyle.display == 'none';
if (hidden) {
traitStyle.display = 'block';
} else {
traitStyle.display = 'none';
}
});
// Add Settings Structure
var traitsSector_more = $('<div class="gjs-sm-sector no-select">'+
'<div class="gjs-sm-title"><span class="icon-settings fa fa-cog"></span> Structure</div>' +
'<div class="gjs-sm-properties" style="display: none;"></div></div>');
var traitsProps_more = traitsSector_more.find('.gjs-sm-properties');
traitsProps_more.append($('.gjs-trt-traits'));
$('.gjs-sm-sectors').before(traitsSector_more);
traitsSector_more.find('.gjs-sm-title').on('click', function(){
var traitStyle_more = traitsProps_more.get(0).style;
var hidden = traitStyle_more.display == 'none';
if (hidden) {
traitStyle_more.display = 'block';
} else {
traitStyle_more.display = 'none';
}
});
I don't know what to do that I may be handle blinding data into the above 2 sector when I click on any the component.
as far as I can see Its problems :
Answers (2)
At the moment you can render only one container of traits, so you can't split them
I'm confused about the demo and this answer. Why is it that I can configure the general, dimension, etc sections at init but not Settings/Traits or others. Also, you can't add arbitrary sections to the presets during init? I'm surprised, especially cause the docs say I should be able to: "customStyleManager - Use custom set of sectors for the Style Manager". I replicated General and tried renaming to Traits, Settings and something random but no sections were added.
customStyleManager | Use custom set of sectors for the Style Manager
Related Questions and Answers
Continue research with similar issue discussions.
Issue #995
[Question ] how to add fields on trait dynamically
I am building the trait when the application starts. so getting the below fields at side bar as settings Now I want more field to be loaded...
Issue #1902
[QUESTIONS] Disable/change build-in components behavior
Hey, Trying to get GrapesJs work for a project I'm currently working on. But is there a way to disable the built-in components that convert...
Issue #1821
[QUESTIONS] How to apply the style changes to the ID instead of the class?
Hi, I have two elements with the same classes. I want to apply style changes with style manager to one of these two elements. I add ID but...
Issue #1574
Question, Block content from file
Hi, this is not really an issue but more a question. I'm currently using custom blocks in my GrapesJS editor. This is how I create them : I...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.