Property

Properties

• id String (opens new window) Property id, eg. my-property-id.
• property String (opens new window) Related CSS property name, eg. text-align.
• default String (opens new window) Defaul value of the property.
• label String (opens new window) Label to use in UI, eg. Text Align.
• onChange Function (opens new window)? Change callback.

   onChange: ({ property, from, to }) => {
     console.log(`Changed property`, property.getName(), { from, to });
   }
  

getId

Get property id.

Returns String (opens new window)

getType

Get the property type. The type of the property is defined on property creation and based on its value the proper Property class is assigned. The default type is base.

Returns String (opens new window)

getName

Get name (the CSS property name).

Returns String (opens new window)

getLabel

Get property label.

Parameters

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

  • opts.locale Boolean (opens new window) Use the locale string from i18n module (optional, default true)

Returns String (opens new window)

getValue

Get property value.

Parameters

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

  • opts.noDefault Boolean (opens new window) Avoid returning the default value (optional, default false)

Returns String (opens new window)

hasValue

Check if the property has value.

Parameters

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

  • opts.noParent Boolean (opens new window) Ignore the value if it comes from the parent target. (optional, default false)

Returns Boolean (opens new window)

hasValueParent

Indicates if the current value is coming from a parent target (eg. another CSSRule).

Returns Boolean (opens new window)

getStyle

Get the CSS style object of the property.

Parameters

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

  • opts.camelCase Boolean (opens new window)? Return property name in camelCase.

Examples

// In case the property is `color` with a value of `red`.
console.log(property.getStyle());
// { color: 'red' };

Returns Object (opens new window)

getDefaultValue

Get the default value.

Returns string (opens new window)

upValue

Update the value. The change is also propagated to the selected targets (eg. CSS rule).

Parameters

• value String (opens new window) New value

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

  • opts.partial Boolean (opens new window) If true the update on targets won't be considered complete (not stored in UndoManager) (optional, default false)
  • opts.noTarget Boolean (opens new window) If true the change won't be propagated to selected targets. (optional, default false)

isVisible

Check if the property is visible

Returns Boolean (opens new window)

clear

Clear the value. The change is also propagated to the selected targets (eg. the css property is cleared).

Parameters

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

  • opts.noTarget Boolean (opens new window) If true the change won't be propagated to selected targets. (optional, default false)

canClear

Indicates if the current value comes directly from the selected target and so can be cleared.

Returns Boolean (opens new window)

getParent

If the current property is a sub-property, this will return the parent Property.

Returns ([Property] | null)

isFull

Indicates if the property is full-width in UI.

Returns Boolean (opens new window)