amis/docs/zh-CN/components/form/input-group.md

108 lines
2.3 KiB
Markdown
Raw Normal View History

2020-07-28 10:03:53 +08:00
---
title: Input-Group 输入框组合
2020-07-29 17:33:14 +08:00
description:
2020-07-28 10:03:53 +08:00
type: 0
group: null
menuName: Input-Group
2020-07-29 17:33:14 +08:00
icon:
2020-07-28 10:03:53 +08:00
order: 28
---
2020-07-29 17:33:14 +08:00
2020-07-28 10:03:53 +08:00
**输入框组合选择器** 可用于输入框与其他组件进行组合。
## 基本用法
```schema: scope="body"
2020-07-28 10:03:53 +08:00
{
"type": "form",
2021-01-19 10:20:09 +08:00
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
2020-07-28 10:03:53 +08:00
"controls": [
{
"type": "input-group",
"name": "input-group",
"label": "input 组合",
"controls": [
{
"type": "text",
"placeholder": "搜索作业ID/名称",
"inputClassName": "b-r-none p-r-none",
"name": "input-group"
},
{
"type": "submit",
"label": "搜索",
"level": "primary"
}
]
},
{
"type": "input-group",
"label": "各种组合",
"controls": [
{
"type": "select",
"name": "memoryUnits",
"options": [
{
"label": "Gi",
"value": "Gi"
},
{
"label": "Mi",
"value": "Mi"
},
{
"label": "Ki",
"value": "Ki"
}
],
"value": "Gi"
},
{
"type": "text",
"name": "memory"
},
{
"type": "select",
"name": "memoryUnits2",
"options": [
{
"label": "Gi",
"value": "Gi"
},
{
"label": "Mi",
"value": "Mi"
},
{
"label": "Ki",
"value": "Ki"
}
],
"value": "Gi"
},
{
"type": "button",
"label": "Go"
}
]
}
]
}
```
2020-07-29 17:33:14 +08:00
## 校验
input-group 配置校验方法较为特殊,需要配置下面步骤:
1. input-group 上配置任意`name`值
2. input-group 的 controls 内配置的表单项上配置校验规则
2020-07-28 10:03:53 +08:00
## 属性表
| 属性名 | 类型 | 默认值 | 说明 |
| --------- | --------------------------- | ------ | ---------- |
| className | `string` | | CSS 类名 |
| controls | Array<[表单项](./formitem)> | | 表单项集合 |