grapesjs/docs/api/property.md

Property

Properties

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

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

getId

Get property id.

Returns String

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

getName

Get name (the CSS property name).

Returns String

getLabel

Get property label.

Parameters

• opts Object Options (optional, default {})

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

Returns String

getValue

Get property value.

Parameters

• opts Object Options (optional, default {})

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

Returns String

hasValue

Check if the property has value.

Parameters

• opts Object Options (optional, default {})

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

Returns Boolean

hasValueParent

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

Returns Boolean

getStyle

Get the CSS style object of the property.

Parameters

• opts Object Options (optional, default {})

  • opts.camelCase Boolean? 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

getDefaultValue

Get the default value.

Returns string

upValue

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

Parameters

• value String New value

• opts Object Options (optional, default {})

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

isVisible

Check if the property is visible

Returns Boolean

clear

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

Parameters

• opts Object Options (optional, default {})

  • opts.noTarget Boolean 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

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