amis2/docs/zh-CN/components/form/control.md

1.6 KiB

title description type group menuName icon order
Control 表单项包裹 0 null Control 24

展示类的组件,如果直接放在表单项里面,不会有 labeldescription 之类的信息展示。

{
  "type": "form",
  "mode": "horizontal",
  "body": [
    {
        "type": "input-text",
        "label": "文本输入"
    },

    {
      "type": "image",
      "src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80"
    },

    {
        "type": "qr-code",
        "codeSize": 128,
        "backgroundColor": "#108cee",
        "foregroundColor": "#000",
        "value": "https://www.baidu.com"
    }
  ]
}

如果想像文本输入框一样,可以配置 labeldescription,则可以通过这个组件包裹一下。

{
  "type": "form",
  "mode": "horizontal",
  "body": [
    {
        "type": "input-text",
        "label": "文本输入"
    },

    {
        "type": "control",
        "label": "图片",
        body: [
          {
            "type": "image",
            "src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80"
          }
        ]
    },

    {
        "type": "control",
        "label": "二维码",
        "description": "还可以来点描述",
        body: [
          {
              "type": "qr-code",
              "codeSize": 128,
              "backgroundColor": "#108cee",
              "foregroundColor": "#000",
              "value": "https://www.baidu.com"
          }
        ]
    }
  ]
}