You can configure a margin control suite that consists of four steppers to specify the top, bottom, left, and right margins.

Fields

FieldDescriptionTypeRequiredRemarks
nameThe name of the control.stringYesNone
typeThe type of the control.stringYesNone
defaultThe default value.stringNoIf this field is not specified, it is left empty.
componentsThe controls in the suite.arrayNoThe default value is ["top","bottom","left","right"]. You can configure "top", "bottom", "left", and "right".
enableHideSpecifies whether to hide controls on the canvas.booleanNoThe default value is false. If this field is set to true, a show or hide icon appears, and the show field is added.

Values

ConditionData typeExampleDefault value
The enableHide field is not configured or is set to false.object
{
 "top": 12,
 "right": 24,
 "bottom": 8,
 "left": 24
}
{
 "top": 10,
 "right": 10,
 "bottom": 10,
 "left": 10
}
The enableHide field is set to true.object
{
 "top": 12,
 "right": 24,
 "bottom": 8,
 "left": 24,
 "show": true
}
{
 "top": 10,
 "right": 10,
 "bottom": 10,
 "left": 10,
 "show": true
}

Sample configurations

  • The enableHide field is not configuredConfiguration example 1
    {
  "margin": {
    "name": "Margin",
    "type": "margin",
    "default": { "top": 10, "left": 10, "right": 10, "bottom": 10 }
  }
}
  • The enableHide field is set to trueConfiguration example 2
    {
  "margin": {
    "name": "Margin",
    "type": "margin",
    "enableHide": true,
    "default": { "top": 10, "left": 10, "right": 10, "bottom": 10 }
  }
}
  • The components field is configuredConfiguration example 3
    {
  "marginComponents": {
    "name": "Margin",
    "type": "margin",
    "enableHide": true,
    "components": ["top", "bottom"]
  }
}