Collapse Specific Property Groups
Use the collapsed property under the editor configuration to keep a property group closed by default.
unlayer.init({
tools: {
button: {
sections: {
buttonOptions: {
editor: {
enabled: true,
collapsed: true
}
}
}
}
}
});In this example, the Button Options section will remain collapsed when the editor loads.
Reorder Property Groups
To change the order in which property groups appear in the editor, use the position property.
unlayer.init({
tools: {
button: {
sections: {
buttonOptions: {
editor: {
enabled: true,
collapsed: true,
position: 3
}
}
}
}
}
});Here, the Button Options group will appear at position 3 within the editor’s property panel.
Important Note
The Action property group (where the button link or call-to-action is defined) has a fixed position and cannot be reordered due to its functional importance.
Property Explanation
Property | Description |
tools | The main configuration object for all available tools (e.g., image, text, button). |
button | Refers specifically to the Button Tool. |
sections | Defines various groups or sections of editable properties within a tool. |
buttonOptions | The property group controlling button-specific options (e.g., style, color, text). |
editor.collapsed | When set to |
editor.position | Specifies the order of the property group within the sidebar panel. |