diff --git a/docs/.vuepress/public/sm-type-composite.jpg b/docs/.vuepress/public/sm-type-composite.jpg new file mode 100644 index 000000000..35822e826 Binary files /dev/null and b/docs/.vuepress/public/sm-type-composite.jpg differ diff --git a/docs/.vuepress/public/sm-type-radio.jpg b/docs/.vuepress/public/sm-type-radio.jpg new file mode 100644 index 000000000..a75bdcc1a Binary files /dev/null and b/docs/.vuepress/public/sm-type-radio.jpg differ diff --git a/docs/.vuepress/public/sm-type-stack.jpg b/docs/.vuepress/public/sm-type-stack.jpg new file mode 100644 index 000000000..8d76f2730 Binary files /dev/null and b/docs/.vuepress/public/sm-type-stack.jpg differ diff --git a/docs/modules/Style-manager.md b/docs/modules/Style-manager.md index c3a54fb27..16ddb0408 100644 --- a/docs/modules/Style-manager.md +++ b/docs/modules/Style-manager.md @@ -126,11 +126,13 @@ sectors: [ name: 'First sector', properties: [ { + // Default options // id: 'padding', // The id of the property, if missing, will be the same as `property` value type: 'number', label: 'Padding', // Label for the property property: 'padding', // CSS property to change default: '0', // Default value to display + // Additonal `number` options units: ['px', '%'], // Units (available only for the 'number' type) min: 0, // Min value (available only for the 'number' type) } @@ -172,7 +174,7 @@ Let's see below the list of all available default types with their relative UI a #### Default types -* `base` - The base type, renders as a simple text input field. Model: [Property](/api/property.html) +* `base` - The base type, renders as a simple text input field. **Model**: [Property](/api/property.html) @@ -186,11 +188,11 @@ Let's see below the list of all available default types with their relative UI a }, ``` -* `color` - Same props as `base` but the UI is a color picker. Model: [Property](/api/property.html) +* `color` - Same props as `base` but the UI is a color picker. **Model**: [Property](/api/property.html) -* `number` - Number input field for numeric values. Model: [PropertyNumber](/api/property_number.html) +* `number` - Number input field for numeric values. **Model**: [PropertyNumber](/api/property_number.html) @@ -207,11 +209,11 @@ Let's see below the list of all available default types with their relative UI a max: 100, }, ``` -* `slider` - Same props as `number` but the UI is a slider. Model: [PropertyNumber](/api/property_number.html) +* `slider` - Same props as `number` but the UI is a slider. **Model**: [PropertyNumber](/api/property_number.html) -* `select` - Select input with options. Model: [PropertySelect](/api/property_select.html) +* `select` - Select input with options. **Model**: [PropertySelect](/api/property_select.html) @@ -222,6 +224,7 @@ Let's see below the list of all available default types with their relative UI a property: 'display', label: 'Select type', default: 'block', + // Additional props options: [ {id: 'block', label: 'Block'}, {id: 'inline', label: 'Inline'}, @@ -230,9 +233,48 @@ Let's see below the list of all available default types with their relative UI a }, ``` -* `radio` - -* `composite` - -* `stack` - +* `radio` - Same props as `select` but the UI is a radio button. **Model**: [PropertySelect](/api/property_select.html) + + + +* `composite` - This type is great for CSS shorthand properties, where the final value is a composition of multiple sub properties. **Model**: [PropertyComposite](/api/property_composite.html) + + + + ```js + // Example + { + type: 'composite', + property: 'margin', + label: 'Composite type', + // Additional props + properties: [ + { type: 'number', units: ['px'], default: '0', property: 'margin-top' }, + { type: 'number', units: ['px'], default: '0', property: 'margin-right' }, + { type: 'number', units: ['px'], default: '0', property: 'margin-bottom' }, + { type: 'number', units: ['px'], default: '0', property: 'margin-left' }, + ] + }, + ``` +* `stack` - This type is great for CSS multiple properties like `text-shadow`, `box-shadow`, etc. **Model**: [PropertyStack](/api/property_stack.html) + + + + ```js + // Example + { + type: 'stack', + property: 'text-shadow', + label: 'Stack type', + // Additional props + properties: [ + { type: 'number', units: ['px'], default: '0', property: 'x' }, + { type: 'number', units: ['px'], default: '0', property: 'y' }, + { type: 'number', units: ['px'], default: '0', property: 'blur' }, + { type: 'color', default: 'black', property: 'color' }, + ] + }, + ``` #### Built-in properties diff --git a/src/style_manager/model/PropertyStack.js b/src/style_manager/model/PropertyStack.js index 44421576a..bdb987fe3 100644 --- a/src/style_manager/model/PropertyStack.js +++ b/src/style_manager/model/PropertyStack.js @@ -15,7 +15,7 @@ const PARTS_REG = /\s(?![^(]*\))/; * @typedef PropertyStack * @property {String|RegExp} [layerSeparator=', '] The separator used to split layer values. * @property {String} [layerJoin=', '] Value used to join layer values. - * @property {Function} [layerLabel] Custom logic for creating the layer value. + * @property {Function} [layerLabel] Custom logic for creating the layer label. * */ export default class PropertyStack extends PropertyComposite {