PropertyComposite

Extends Property

Properties

• properties Array (opens new window)<Object (opens new window)> Array of sub properties, eg. [{ type: 'number', property: 'margin-top' }, ...]
• detached Boolean (opens new window)? Indicate if the final CSS property is splitted (detached: margin-top: X; margin-right: Y; ...) or combined (not detached: margin: X Y ...;)
• separator (String (opens new window) | RegExp (opens new window))? Value used to split property values, default " ".
• join String (opens new window)? Value used to join property values, default " ".
• fromStyle Function (opens new window)? 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 (opens new window)? 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 (opens new window)<Property>

getProperty

Get property by id.

Parameters

• id String (opens new window) Property id.

Returns (Property | null)

getPropertyAt

Get property at index.

Parameters

• index Number (opens new window)

Returns (Property | null)

isDetached

Check if the property is detached.

Returns Boolean (opens new window)

getValues

Get current values of properties.

Parameters

• opts Object (opens new window) Options (optional, default {})

  • opts.byName Boolean (opens new window) 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 (opens new window)

getSeparator

Get property separator.

Returns RegExp (opens new window)

getJoin

Get the join value.

Returns String (opens new window)