test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-02 11:58:10 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity
648e228b33
amis/docs/zh-CN/components/form/group.md
吴多益 c8c4b6efa3
文档文字小调整；统一删掉 schema 中的高度设置；修复 tinymce 弹窗可能被遮挡问题 (#1336) 
* 文档优化

* 文档细节调整，删除示例的 height 设置，使用自动撑开

* sdk 使用完整例子，因为新版没发布

* 修复官网语言不正确问题

* 增加 icon 调整颜色及大小的例子

* 修复文字错误

* 补充 each 的文档

* 修复 zh-CN 大写问题
2021-01-07 23:35:03 +08:00

4.0 KiB
Executable File
Raw Blame History

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

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

基本用法

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

展示

可以给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