fill表示组件的配置项类型为填充框,⽀持三种填充类型以及他们的组合。

配置项说明

字段名

含义

类型

是否必选

备注

name

显示名

string

无。

type

类型

string

无。

default

默认值

stringobject

不填时值为空。取值请参见下文的值说明

components

填充类型

array

支持以下三种填充类型,以及它们的组合:

  • flat:纯⾊填充(默认)。

  • linearGradient:渐变填充。

  • image:图片填充。

说明

填充类型不同,对应的值也不同,详情请参见值说明

值说明

条件

数据类型

示例

默认值

备注

当仅有纯色填充时

string

"#333"

"#000"

无。

当仅有线性渐变填充时

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)"
   }
 ]
}

无。

当仅有图片填充时

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
}

无。

当支持多种填充类型时

object

{
"type":"linearGradient",
"value":
  {
    "angle":90,
      "stops":[
     {
        "color":"#333",
        "offset":0
     },
     {
        "color":"red",
        "offset":100
     }
      ]
  }
}
{
 "type": "flat",
 "value": "#000"
}
  • type:当前应用的填充类型。

  • value:填充值。

配置示例

  • 填充类型为flatfill-flat配置示例

    "flat": {
        "name": "纯色填充",
        "type": "fill",
        "default": "#333"
    }
  • 填充类型为linearGradientfill-linearGradient-配置示例

    "linearGradient": {
        "name": "线性渐变填充",
        "type": "fill",
        "components": [
          "linearGradient"
        ],
        "default": {
          "angle": 90,
          "stops": [
            {
              "color": "#333",
              "offset": 0
            },
            {
              "color": "red",
              "offset": 100
            }
          ]
        }
      }
  • 填充类型为imagefill-image-配置示例

     "image": {
        "name": "图片填充",
        "type": "fill",
        "components": [
          "image"
        ],
        "default": {
          "fillType": "cover",
          "url": "https://img.alicdn.com/tfs/TB16ag8v4z1gK0jSZSgXXavwpXa-96-96.png",
          "tileSize": 100
        }
    }