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

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

表单项，默认都是一行显示一个，Group 组件用于在一行展示多个表单项，会自动根据表单项数量均分宽度。

基本用法

{
  "type": "form",
  "body": [
    {
      "type": "group",
      "body": [
        {
          "type": "input-text",
          "name": "text1",
          "label": "文本1"
        },
        {
          "type": "input-text",
          "name": "text2",
          "label": "文本2"
        }
      ]
    },
    {
      "type": "divider"
    },
    {
      "type": "group",
      "body": [
        {
          "type": "input-text",
          "name": "text3",
          "label": "文本3"
        },
        {
          "type": "input-text",
          "name": "text4",
          "label": "文本4"
        },
        {
          "type": "input-text",
          "name": "text5",
          "label": "文本5"
        }
      ]
    }
  ]
}

展示

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

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

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

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

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

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

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

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

宽度占比

在表单项内部可以通过 columnRatio 来控制宽度，整体是 12 等分

{
  "type": "form",
  "body": [
    {
      "type": "group",
      "body": [
        {
          "type": "input-text",
          "name": "text1",
          "label": "text1",
          "columnRatio": 8
        },
        {
          "type": "input-text",
          "name": "text2",
          "label": "text2",
          "columnRatio": 4
        }
      ]
    },
    {
        "type": "divider"
    },
    {
      "type": "group",
      "body": [
        {
          "type": "input-text",
          "name": "text1",
          "label": "text1",
          "columnRatio": 6
        },
        {
          "type": "input-text",
          "name": "text2",
          "label": "text2",
          "columnRatio": 4
        },
        {
          "type": "input-text",
          "name": "text3",
          "label": "text3"
        }
      ]
    }
  ]
}

属性表

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