* `property.type` **[string][17]** Type of the property: integer | radio | select | color | file | composite | stack (optional, default `''`)
* `property.units` **[Array][19]<[string][17]>** Unit of measure available, eg. \['px','%','em']. Only for integer type (optional, default `[]`)
* `property.unit` **[string][17]** Default selected unit from `units`. Only for integer type (optional, default `''`)
* `property.min` **[number][20]** Min possible value. Only for integer type (optional, default `null`)
* `property.max` **[number][20]** Max possible value. Only for integer type (optional, default `null`)
* `property.defaults` **[string][17]** Default value (optional, default `''`)
* `property.info` **[string][17]** Some description (optional, default `''`)
* `property.icon` **[string][17]** Class name. If exists no text will be displayed (optional, default `''`)
* `property.preview` **[Boolean][18]** Show layers preview. Only for stack type (optional, default `false`)
* `property.functionName` **[string][17]** Indicates if value need to be wrapped in some function, for istance `transform: rotate(90deg)` (optional, default `''`)
* `property.properties` **[Array][19]<[Object][16]>** Nested properties for composite and stack type (optional, default `[]`)
* `property.layers` **[Array][19]<[Object][16]>** Layers for stack properties (optional, default `[]`)
* `property.list` **[Array][19]<[Object][16]>** List of possible options for radio and select types (optional, default `[]`)
* `sectorId`**[String][17]** Sector id.
* `property`**[Object][16]** Property definition. Check the [base available properties][20] + others based on the `type` of your property.
If you're planning to have a multi-language editor you can easily connect sector and property labels to the [I18n] module via their IDs.
@ -343,6 +347,10 @@ grapesjs.init({
});
```
## Components constraints
When you define custom components you can also indicate, via `stylable` and `unstylable` props, which CSS properties should be available for styling. In that case, the Style Manager will only show the available properties. If the sector doesn't contain any available property, it won't be shown.
@ -396,34 +404,48 @@ grapesjs.init({
});
```
## Programmatic usage
For a more advanced usage you can rely on the [Style Manager API] to perform different kind of actions related to the module.
Artur Arseniev
5 years ago