## PropertyComposite **Extends Property** [Property]: property.html ### Properties * `properties` **[Array][1]<[Object][2]>** Array of sub properties, eg. `[{ type: 'number', property: 'margin-top' }, ...]` * `detached` **[Boolean][3]?** Indicate if the final CSS property is splitted (detached: `margin-top: X; margin-right: Y; ...`) or combined (not detached: `margin: X Y ...;`) * `separator` **([String][4] | [RegExp][5])?** Value used to split property values, default `" "`. * `join` **[String][4]?** Value used to join property values, default `" "`. * `fromStyle` **[Function][6]?** Custom logic for getting property values from the target style object. ```js fromStyle: (style) => { const margins = parseMarginShorthand(style.margin); return { 'margin-top': margins.top, // ... }; } ``` * `toStyle` **[Function][6]?** Custom logic for creating the CSS style object to apply on selected targets. ```js toStyle: (values) => { const top = values['margin-top'] || 0; const right = values['margin-right'] || 0; // ... return { margin: `${top} ${right} ...`, }; } ``` ### getProperties Get properties. Returns **[Array][1]<[Property]>** ### getProperty Get property by id. #### Parameters * `id` **[String][4]** Property id. Returns **([Property] | null)** ### getPropertyAt Get property at index. #### Parameters * `index` **[Number][7]** Returns **([Property] | null)** ### isDetached Check if the property is detached. Returns **[Boolean][3]** ### getValues Get current values of properties. #### Parameters * `opts` **[Object][2]** Options (optional, default `{}`) * `opts.byName` **[Boolean][3]** Use property names as a key instead of the id. (optional, default `false`) #### Examples ```javascript // 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][2]** ### getSeparator Get property separator. Returns **[RegExp][5]** ### getJoin Get the join value. Returns **[String][4]** [1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array [2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object [3]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean [4]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String [5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/RegExp [6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function [7]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number