test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-29 18:48:45 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

feat: form 支持快速设置为几列的 columnCount 设置 (#2975)

Browse Source 
* feat: form 支持快速设置为几列的 columnCount 设置

* 改一下命名
This commit is contained in:
吴多益 2021-11-17 20:03:57 +08:00 committed by GitHub
parent 1393b4ea7c
commit 5f94fa8a9c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 117 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
docs/zh-CN/components/form/index.md
View File

@ -204,7 +204,30 @@ order: 24
### 实现一行展示多个表单项
使用 group 实现一行显示多个表单项
有两种方法，一个是通过 `columnCount` 来控制表单显示几列
```schema: scope="body"
{
"type": "form",
"title": "内联模式",
"columnCount": 2,
"body": [
{
"type": "input-email",
"name": "email",
"label": "邮箱",
"required": true
},
{
"type": "input-password",
"name": "password",
"label": "密码"
}
]
}
```
另一个方法是使用 group，它能实现每行显示不同列数，可以实现更灵活的控制
```schema: scope="body"
[
@ -216,14 +239,37 @@ order: 24
"type": "group",
"body": [
{
"type": "input-email",
"name": "email",
"label": "邮箱"
"type": "input-text",
"name": "text1",
"label": "文本1"
},
{
"type": "input-password",
"name": "password",
"label": "密码"
"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"
}
]
}
@ -990,3 +1036,4 @@ Form 支持轮询初始化接口，步骤如下：
| preventEnterSubmit | `boolean` | `false` | 禁用回车提交表单 |
| trimValues | `boolean` | `false` | trim 当前表单项的每一个值 |
| promptPageLeave | `boolean` | `false` | form 还没保存，即将离开页面前是否弹框确认。 |
| columnCount | `number` | 0 | 表单项显示为几列 |

48
scss/components/form/_form.scss
View File

@ -358,3 +358,51 @@
.#{$ns}Form--quickEdit {
min-width: var(--Form-control-widthSm);
}
.#{$ns}Form--column {
display: flex;
flex-wrap: wrap;
margin-left: calc(var(--Form-group-gutterWidth) / -2);
margin-right: calc(var(--Form-group-gutterWidth) / -2);
> .#{$ns}Form-item {
flex-grow: 1;
padding-left: calc(var(--Form-group-gutterWidth) / 2);
padding-right: calc(var(--Form-group-gutterWidth) / 2);
}
}
.#{$ns}Form--column-2 > .#{$ns}Form-item {
width: 50%;
}
.#{$ns}Form--column-3 > .#{$ns}Form-item {
width: 33%;
}
.#{$ns}Form--column-4 > .#{$ns}Form-item {
width: 25%;
}
.#{$ns}Form--column-5 > .#{$ns}Form-item {
width: 20%;
}
.#{$ns}Form--column-6 > .#{$ns}Form-item {
width: 16.6%;
}
.#{$ns}Form--column-7 > .#{$ns}Form-item {
width: 14.2%;
}
.#{$ns}Form--column-8 > .#{$ns}Form-item {
width: 12.5%;
}
.#{$ns}Form-column-9 > .#{$ns}Form-item {
width: 11.1%;
}
.#{$ns}Form-column-10 > .#{$ns}Form-item {
width: 10%;
}

16
src/renderers/Form/index.tsx
View File

@ -202,6 +202,11 @@ export interface FormSchema extends BaseSchema {
*/
mode?: 'normal' | 'inline' | 'horizontal';
/**
* 表单项显示为几列
*/
columnCount?: number;
/**
* 如果是水平排版，这个属性可以细化水平排版的左右宽度占比。
*/
@ -347,6 +352,7 @@ export default class Form extends React.Component<FormProps, object> {
right: 10,
offset: 2
},
columnCount: 0,
panelClassName: 'Panel--default',
messages: {
fetchFailed: 'fetchFailed',
@ -367,6 +373,7 @@ export default class Form extends React.Component<FormProps, object> {
'initFetch',
'wrapWithPanel',
'mode',
'columnCount',
'collapsable',
'horizontal',
'panelClassName',
@ -1418,6 +1425,7 @@ export default class Form extends React.Component<FormProps, object> {
debug,
$path,
store,
columnCount,
render
} = this.props;
@ -1429,7 +1437,13 @@ export default class Form extends React.Component<FormProps, object> {
return (
<WrapperComponent
className={cx(`Form`, `Form--${mode || 'normal'}`, className)}
className={cx(
`Form`,
`Form--${mode || 'normal'}`,
{'Form--column': columnCount},
`Form--column-${columnCount}`,
className
)}
onSubmit={this.handleFormSubmit}
noValidate
>