Enable 'view components' button on panel by default
Hi @Enmaboya ! Looking at the default Panels configuration, it should be active by default. If you have a custom panels configuration, you need to add the active: true property to the button's configuration (like here). Alternatively, you can retrieve the button using the Panels API to make it active after initializin...
Read full answer below ↓Question
this button is currently off by default. so you have to turn it on every time, which is not obvious to everyone.
how do you make it active right away?
Answers (3)
Hi @Enmaboya !
Looking at the default Panels configuration, it should be active by default.
If you have a custom panels configuration, you need to add the active: true property to the button's configuration (like here).
Alternatively, you can retrieve the button using the Panels API to make it active after initializing the editor, eg:
editor.Panels.getButton('options', 'sw-visibility').set('active', true);
Note that the getButton parameters may vary depending on your panels & buttons configurations.
@mcottret thank you so much!
In Angular
myPlugin: any;
this.myPlugin = editor => {
editor.Panels.addPanel({
id: 'basic-actions',
el: '.panel__basic-actions',
buttons: [
{
id: 'visibility',
active: true, // active by default
className: 'btn-toggle-borders',
label: '<u>B</u>',
command: 'sw-visibility', // Built-in command
}
],
});
}
After that inn your editor init add your plugin
return grapesjs.init({
plugins: [this.myPlugin],
})Related Questions and Answers
Continue research with similar issue discussions.
Issue #3414
Component model is not reset when create new drag
When dragging a component from right panel component model doesn't set to default value but has value of previously added component
Issue #2280
[Question] How to show the traits manager button/panel
Hi, I must be missing something basic, but how do I add the traits manager panel without adding a plugin? The newsletter plugin has it adde...
Issue #899
[QUESTION]: add button to selected element panel
How to add custom button to that panel:
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...
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.