mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-05 21:39:53 +08:00
c8c4b6efa3
* 文档优化 * 文档细节调整,删除示例的 height 设置,使用自动撑开 * sdk 使用完整例子,因为新版没发布 * 修复官网语言不正确问题 * 增加 icon 调整颜色及大小的例子 * 修复文字错误 * 补充 each 的文档 * 修复 zh-CN 大写问题
4.0 KiB
Executable File
4.0 KiB
Executable File
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 |