grapesjs/docs/api/property_composite.md

PropertyComposite

Extends Property

Properties

• properties Array<Object> Array of sub properties, eg. [{ type: 'number', property: 'margin-top' }, ...]
• detached Boolean? Indicate if the final CSS property is splitted (detached: margin-top: X; margin-right: Y; ...) or combined (not detached: margin: X Y ...;)
• separator (String | RegExp)? Value used to split property values, default " ".
• join String? Value used to join property values, default " ".
• fromStyle Function? Custom logic for getting property values from the target style object.

   fromStyle: (style) => {
     const margins = parseMarginShorthand(style.margin);
     return {
       'margin-top': margins.top,
       // ...
     };
   }
  

• toStyle Function? Custom logic for creating the CSS style object to apply on selected targets.

   toStyle: (values) => {
     const top = values['margin-top'] || 0;
     const right = values['margin-right'] || 0;
     // ...
     return {
       margin: `${top} ${right} ...`,
     };
   }
  

getProperties

Get properties.

Returns Array<Property>

getProperty

Get property by id.

Parameters

• id String Property id.

Returns (Property | null)

getPropertyAt

Get property at index.

Parameters

• index Number

Returns (Property | null)

isDetached

Check if the property is detached.

Returns Boolean

getValues

Get current values of properties.

Parameters

• opts Object Options (optional, default {})

  • opts.byName Boolean Use property names as a key instead of the id. (optional, default false)

Examples

// In case the property is `margin` with sub properties like `margin-top`, `margin-right`, etc.
console.log(property.getValues());
// { 'margin-top': '10px', 'margin-right': '20px', ... };

Returns Object

getSeparator

Get property separator.

Returns RegExp

getJoin

Get the join value.

Returns String