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

179 lines
4.0 KiB
Markdown
Raw Normal View History

2020-07-28 10:03:53 +08:00
---
title: Group 表单项组
2020-07-29 16:20:21 +08:00
description:
2020-07-28 10:03:53 +08:00
type: 0
group: null
menuName: Group
2020-07-29 16:20:21 +08:00
icon:
2020-07-28 10:03:53 +08:00
order: 24
---
2020-12-22 19:08:38 +08:00
表单项默认都是一行显示一个Group 组件用于在一行展示多个表单项,会自动根据表单项数量均分宽度。
2020-07-28 10:03:53 +08:00
## 基本用法
```schema: scope="body"
2020-07-28 10:03:53 +08:00
{
"type": "form",
"controls": [
{
"type": "group",
"controls": [
{
"type": "text",
"name": "text1",
"label": "文本1"
},
{
"type": "text",
"name": "text2",
"label": "文本2"
}
]
2020-12-22 19:08:38 +08:00
},
{
"type": "divider"
},
{
"type": "group",
"controls": [
{
"type": "text",
"name": "text3",
"label": "文本3"
},
{
"type": "text",
"name": "text4",
"label": "文本4"
},
{
"type": "text",
"name": "text5",
"label": "文本5"
}
]
2020-07-28 10:03:53 +08:00
}
]
}
```
## 展示
2020-09-21 16:38:51 +08:00
可以给`group`组件设置`mode`调整展示模式,用法同 [Form 展示](./index#%E8%A1%A8%E5%8D%95%E5%B1%95%E7%A4%BA)
2020-07-28 10:03:53 +08:00
下面`group`我们配置了`"mode": "horizontal"`,观察显示情况
```schema: scope="body"
2020-07-28 10:03:53 +08:00
{
"type": "form",
"controls": [
{
2020-12-22 19:08:38 +08:00
"type": "text",
"name": "text",
"label": "文本"
2020-07-28 10:03:53 +08:00
},
{
2020-12-22 19:08:38 +08:00
"type": "divider"
2020-07-28 10:03:53 +08:00
},
{
"type": "group",
"mode": "horizontal",
"controls": [
{
"type": "text",
"name": "text1",
"label": "文本1"
},
{
"type": "text",
"name": "text2",
"label": "文本2"
}
]
}
]
}
```
当表单在水平模式下时,如果`group`内表单项设置`"label": false`,会导致布局错乱,如下
```schema: scope="body"
2020-07-28 10:03:53 +08:00
{
"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`属性,保持和其他表单项布局统一
```schema: scope="body"
2020-07-28 10:03:53 +08:00
{
"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 类名 |
2020-07-29 16:20:21 +08:00
| label | `string` | | group 的标签 |
2020-07-28 10:03:53 +08:00
| controls | Array<[表单项](./formitem)> | | 表单项集合 |
2020-09-21 16:38:51 +08:00
| mode | `string` | | 展示默认,同 [Form](./index#%E8%A1%A8%E5%8D%95%E5%B1%95%E7%A4%BA) 中的模式 |
2020-08-03 11:31:02 +08:00
| gap | `string` | | 表单项之间的间距,可选:`xs`、`sm`、`normal` |
2020-07-28 10:03:53 +08:00
| direction | `string` | `"horizontal"` | 可以配置水平展示还是垂直展示。对应的配置项分别是:`vertical`、`horizontal` |