diff --git a/docs/modules/Style-manager.md b/docs/modules/Style-manager.md index 23a85bdb7..cc98a96de 100644 --- a/docs/modules/Style-manager.md +++ b/docs/modules/Style-manager.md @@ -43,7 +43,7 @@ Check the full list of available options here: [Style Manager Config](https://gi ## Initialization -The Style Manager module is organized in sectors where each sector contains a list of properties to display. The default Style Manager configuration contains already a list of common property styles and you can see them by simply skipping the `styleManagerConfig.sectors` option. +The Style Manager module is organized in sectors where each sector contains a list of properties to display. The default Style Manager configuration contains already a list of default common property styles and you can use them by simply skipping the `styleManagerConfig.sectors` option. ```js grapesjs.init({ @@ -62,7 +62,57 @@ It makes sense to show the Style Manager UI only when you have at least one comp ### Sector defintions -Define sectors + label i18n +Each sector is identified by its `name` and a list of `properties` to display. You can also specify the `id` in order to access the sector via API (if not indicated it will be generated from the `name`) and the default `open` state. + +```js +grapesjs.init({ + // ... + styleManager: { + sectors: [ + { + name: 'First sector', + properties: [], + // id: 'first-sector', // Id generated from the name + // open: true, // The sector is open by default + }, + { + open: false, // render it closed by default + name: 'Second sector', + properties: [], + }, + ], + }, +}); +``` +The label of the sector you see in the editor is using directly the `name` but you can also rely on the [I18n] module via sector's `id` in case you plan to have a multi-language editor. + +```js +grapesjs.init({ + i18n: { + // Use `messagesAdd` in order to extend the default set + messagesAdd: { + en: { + styleManager: { + sectors: { + 'first-sector-id': 'First sector EN' + } + } + } + } + }, + // ... + styleManager: { + sectors: [ + { + id: 'first-sector-id', + // You can leave the name as a fallback in case the i18n definition is missing + name: 'First sector', + }, + // ... + ], + }, +}); +``` ### Property defintions @@ -98,4 +148,5 @@ Example usage: [Components]: +[I18n]: [Style Manager API]: \ No newline at end of file