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

配置项说明

字段名 含义 类型 是否必选 备注
name 显示名 string 无。
type 类型 string 无。
default 默认值 string或object 不填时值为空。取值请参见下文的值说明
components 填充类型 array 支持以下三种填充类型,以及它们的组合:
  • flat:纯⾊填充(默认)。
  • linearGradient:渐变填充。
  • image:图片填充。
说明 填充类型不同,对应的值也不同,详情请参见值说明

值说明

条件 数据类型 示例 默认值 备注
当仅有纯色填充时 string "#000" "#333" 无。
当仅有线性渐变填充时 object
{
 "angle": 0,
 "stops": [
   {
     "offset": 0,
     "color": "#000"
   },
   {
     "offset": 100,
     "color": "rgba(0,0,0,0.5)"
   }
 ]
}
{
 "angle": 0,
 "stops": [
   {
     "offset": 0,
     "color": "#000"
   },
   {
     "offset": 100,
     "color": "red"
   }
 ]
}
无。
当仅有图片填充时 object
{
 "fillType": "stretch",
 "url": "https://img.alicdn.com/tfs/TB19njRJ7zoK1RjSZFlXXai4VXa-16-16.png",
 "tileSize": 100
}
{
"fillType":"cover",
"url":"https://img.alicdn.com/tfs/TB16ag8v4z1gK0jSZSgXXavwpXa-96-96.png",
"tileSize": 100
}
无。
当支持多种填充类型时 object
{
 "type": "flat",
 "value": "#000"
}
{
"type":"linearGradient",
"value":
  {
    "angle":90,
      "stops":[
     {
        "color":"#333",
        "offset":0
     },
     {
        "color":"red",
        "offset":100
     }
      ]
  }
}
  • 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
        }
    }