amis2/docs/components/form/group.md

title	description	type	group	menuName	icon	order
Group 表单项组		0	null	Group		24

表单项，默认都是一行显示一个，Group 组件用于在一行展示多个表单项

基本用法

{
  "type": "form",
  "controls": [
    {
        "type": "text",
        "name": "text",
        "label": "文本"
    },
    {
        "type": "divider"
    },
    {
      "type": "group",
      "controls": [
        {
          "type": "text",
          "name": "text1",
          "label": "文本1"
        },
        {
          "type": "text",
          "name": "text2",
          "label": "文本2"
        }
      ]
    }
  ]
}

展示

可以给group组件设置mode调整展示模式，用法同 Form 展示

下面group我们配置了"mode": "horizontal"，观察显示情况

{
  "type": "form",
  "controls": [
    {
        "type": "text",
        "name": "text",
        "label": "文本"
    },
    {
        "type": "divider"
    },
    {
      "type": "group",
      "mode": "horizontal",
      "controls": [
        {
          "type": "text",
          "name": "text1",
          "label": "文本1"
        },

        {
          "type": "text",
          "name": "text2",
          "label": "文本2"
        }
      ]
    }
  ]
}

当表单在水平模式下时，如果group内表单项设置"label": false，会导致布局错乱，如下

{
  "type": "form",
  "mode": "horizontal",
  "controls": [
    {
        "type": "text",
        "name": "text",
        "label": "文本"
    },
    {
        "type": "divider"
    },
    {
      "type": "group",
      "controls": [
        {
          "type": "text",
          "name": "text1",
          "label": false
        },
        {
          "type": "text",
          "name": "text2",
          "label": false
        }
      ]
    }
  ]
}

这时可以给group配置label属性，保持和其他表单项布局统一

{
  "type": "form",
  "mode": "horizontal",
  "controls": [
    {
        "type": "text",
        "name": "text",
        "label": "文本"
    },
    {
        "type": "divider"
    },
    {
      "type": "group",
      "label": "文本组",
      "controls": [
        {
          "type": "text",
          "name": "text1",
          "label": false
        },
        {
          "type": "text",
          "name": "text2",
          "label": false
        }
      ]
    }
  ]
}

属性表

属性名	类型	默认值	说明
className	string		CSS 类名
label	string		group 的标签
controls	Array<表单项>		表单项集合
mode	string		展示默认，同 Form 中的模式
gap	string		表单项之间的间距，可选：xs、sm、normal
direction	string	"horizontal"	可以配置水平展示还是垂直展示。对应的配置项分别是：vertical、horizontal