## PropertyStack **Extends PropertyComposite** [Layer]: layer.html ### Properties * `preview` **[Boolean][1]?** Indicate if the layer should display a preview. * `layerSeparator` **([String][2] | [RegExp][3])?** The separator used to split layer values. * `layerJoin` **[String][2]?** Value used to join layer values. * `layerLabel` **[Function][4]?** Custom logic for creating layer labels. ```js layerLabel: (layer) => { const values = layer.getValues(); return `A: ${values['prop-a']} B: ${values['prop-b']}`; } ``` * `emptyValue` **([String][2] | [Function][4])?** Empty value to apply when all layers are removed. ```js // use simple string emptyValue: 'inherit', // or a function for a custom style object emptyValue: () => ({ color: 'unset', width: 'auto' }), ``` ### getLayers Get all available layers. Returns **[Array][5]<[Layer]>** ### hasLayers Check if the property has layers. Returns **[Boolean][1]** ### getLayer Get layer by index. #### Parameters * `index` **[Number][6]** Layer index position. (optional, default `0`) #### Examples ```javascript // Get the first layer const layerFirst = property.getLayer(0); // Get the last layer const layers = this.getLayers(); const layerLast = property.getLayer(layers.length - 1); ``` Returns **([Layer] | null)** ### getSelectedLayer Get selected layer. Returns **([Layer] | [undefined][7])** ### selectLayer Select layer. Without a selected layer any update made on inner properties has no effect. #### Parameters * `layer` **[Layer]** Layer to select #### Examples ```javascript const layer = property.getLayer(0); property.selectLayer(layer); ``` ### selectLayerAt Select layer by index. #### Parameters * `index` **[Number][6]** Index of the layer to select. (optional, default `0`) #### Examples ```javascript property.selectLayerAt(1); ``` ### moveLayer Move layer by index. #### Parameters * `layer` **[Layer]** Layer to move. * `index` **[Number][6]** New layer index. (optional, default `0`) #### Examples ```javascript const layer = property.getLayer(1); property.moveLayer(layer, 0); ``` ### addLayer Add new layer to the stack. #### Parameters * `props` **[Object][8]** Custom property values to use in a new layer. (optional, default `{}`) * `opts` **[Object][8]** Options (optional, default `{}`) * `opts.at` **[Number][6]?** Position index (by default the layer will be appended at the end). #### Examples ```javascript // Add new layer at the beginning of the stack with custom values property.addLayer({ 'sub-prop1': 'value1', 'sub-prop2': 'value2' }, { at: 0 }); ``` Returns **[Layer]** Added layer. ### removeLayer Remove layer. #### Parameters * `layer` **[Layer]** Layer to remove. #### Examples ```javascript const layer = property.getLayer(0); property.removeLayer(layer); ``` Returns **[Layer]** Removed layer ### removeLayerAt Remove layer by index. #### Parameters * `index` **[Number][6]** Index of the layer to remove (optional, default `0`) #### Examples ```javascript property.removeLayerAt(0); ``` Returns **([Layer] | null)** Removed layer ### getLayerLabel Get the layer label. The label can be customized with the `layerLabel` property. #### Parameters * `layer` **[Layer]** #### Examples ```javascript const layer = this.getLayer(1); const label = this.getLayerLabel(layer); ``` Returns **[String][2]** ### getStyleFromLayer Get style object from the layer. #### Parameters * `layer` **[Layer]** * `opts` **[Object][8]** Options (optional, default `{}`) * `opts.camelCase` **[Boolean][1]?** Return property names in camelCase. * `opts.number` **[Object][8]?** Limit the result of the number types, eg. `number: { min: -3, max: 3 }` Returns **[Object][8]** Style object ### getStylePreview Get preview style object from the layer. If the property has `preview: false` the returned object will be empty. #### Parameters * `layer` **[Layer]** * `opts` **[Object][8]** Options. Same of `getStyleFromLayer` (optional, default `{}`) Returns **[Object][8]** Style object ### getLayerSeparator Get layer separator. Returns **[RegExp][3]** ### hasEmptyValue Check if the property is with an empty value. Returns **[Boolean][1]** [1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean [2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String [3]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/RegExp [4]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function [5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array [6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number [7]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined [8]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object