You can configure a solid color, gradient color, image padding box, or a combination of them.

Fields

Field Description Type Required Remarks
name The name of the control. string Yes None
type The type of the control. string Yes None
default The default value. string or object No If this field is not specified, it is left empty. For more information, see Values.
components The type of the padding box. array No The value can be flat, linearGradient, image, or a combination of them.
  • flat: indicates the solid color padding box. This is the default value.
  • linearGradient: indicates the gradient color padding box.
  • image: indicates the image padding box.
Note The settings vary based on the padding box type. For more information, see Values.

Values

Condition Data type Example Default value Remarks
Solid color padding box string "#333" "#000" None
Gradient color padding box object 
{
 "angle": 0,
 "stops": [
   {
     "offset": 0,
     "color": "#000"
   },
   {
     "offset": 100,
     "color": "red"
   }
 ]
}
 
{
 "angle": 0,
 "stops": [
   {
     "offset": 0,
     "color": "#000"
   },
   {
     "offset": 100,
     "color": "rgba(0,0,0,0.5)"
   }
 ]
}
 None
Image padding box object 
{
"fillType":"cover",
"url":"https://img.alicdn.com/tfs/TB16ag8v4z1gK0jSZSgXXavwpXa-96-96.png",
"tileSize": 100
}
 
{
 "fillType": "stretch",
 "url": "https://img.alicdn.com/tfs/TB19njRJ7zoK1RjSZFlXXai4VXa-16-16.png",
 "tileSize": 100
}
 None
A combination of multiple padding box types object 
{
"type":"linearGradient",
"value":
  {
    "angle":90,
      "stops":[
     {
        "color":"#333",
        "offset":0
     },
     {
        "color":"red",
        "offset":100
     }
      ]
  }
}
 
{
 "type": "flat",
 "value": "#000"
}
  • type: indicates the type of the padding box.
  • value: indicates the padding value.

Sample configurations

  • Set the type field to flatConfiguration example of a solid color padding box 
    "flat": {
    "name": "Solid Color",
    "type": "fill",
    "default": "#333"
}
  • Set the type field to linearGradientConfiguration example of a gradient color padding box 
    "linearGradient": {
    "name": "Linear Gradient Color",
    "type": "fill",
    "components": [
      "linearGradient"
    ],
    "default": {
      "angle": 90,
      "stops": [
        {
          "color": "#333",
          "offset": 0
        },
        {
          "color": "red",
          "offset": 100
        }
      ]
    }
  }
  • Set the type field set to imageConfiguration example of an image padding box 
     "image": {
    "name": "Image Padding",
    "type": "fill",
    "components": [
      "image"
    ],
    "default": {
      "fillType": "cover",
      "url": "https://img.alicdn.com/tfs/TB16ag8v4z1gK0jSZSgXXavwpXa-96-96.png",
      "tileSize": 100
    }
}