mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-02 03:58:07 +08:00
chore: combo 扩充 subFormHorizontal 属性支持 (#6544)
This commit is contained in:
parent
d4c931cb85
commit
17339d24ef
@ -907,7 +907,7 @@ combo 还有一个作用是增加层级,比如返回的数据是一个深层
|
||||
当做选择器表单项使用时,除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外,还支持下面一些配置
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------------------ | ---------------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| ------------------------ | ---------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| formClassName | `string` | | 单组表单项的类名 |
|
||||
| items | Array<[表单项](./formitem)> | | 组合展示的表单项 |
|
||||
| items[x].columnClassName | `string` | | 列的类名,可以用它配置列宽度。默认平均分配。 |
|
||||
@ -929,6 +929,7 @@ combo 还有一个作用是增加层级,比如返回的数据是一个深层
|
||||
| draggable | `boolean` | `false` | 是否可以拖动排序, 需要注意的是当启用拖动排序的时候,会多一个\$id 字段 |
|
||||
| draggableTip | `string` | | 可拖拽的提示文字 |
|
||||
| subFormMode | `string` | `"normal"` | 可选`normal`、`horizontal`、`inline` |
|
||||
| subFormHorizontal | `Object` | `{"left":2, "right":10, justify: false}` | 当 subFormMode 为 `horizontal` 时有用,用来控制 label 的展示占比 |
|
||||
| placeholder | `string` | `` | 没有成员时显示。 |
|
||||
| canAccessSuperData | `boolean` | `false` | 指定是否可以自动获取上层的数据并映射到表单项上 |
|
||||
| conditions | `object` | | 数组的形式包含所有条件的渲染类型,单个数组内的`test` 为判断条件,数组内的`items`为符合该条件后渲染的`schema` |
|
||||
|
@ -1393,11 +1393,11 @@ Form 支持轮询初始化接口,步骤如下:
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------------------------- | ------------------------------------------------------------------------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| --------------------------- | ------------------------------------------------------------------------- | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| type | `string` | | `"form"` 指定为 Form 渲染器 |
|
||||
| name | `string` | | 设置一个名字后,方便其他组件与其通信 |
|
||||
| mode | `string` | `normal` | 表单展示方式,可以是:`normal`、`horizontal` 或者 `inline` |
|
||||
| horizontal | `Object` | `{"left":"col-sm-2", "right":"col-sm-10", "offset":"col-sm-offset-2"}` | 当 mode 为 `horizontal` 时有用,用来控制 label |
|
||||
| horizontal | `Object` | `{"left":2, "right":10, "justify": false}` | 当 mode 为 `horizontal` 时有用,用来控制 label 的展示占比 |
|
||||
| labelAlign | `"right" \| "left"` | `"right"` | 表单项标签对齐方式,默认右对齐,仅在 `mode`为`horizontal` 时生效 |
|
||||
| labelWidth | `number \| string` | | 表单项标签自定义宽度 |
|
||||
| title | `string` | `"表单"` | Form 的标题 |
|
||||
|
@ -6,7 +6,8 @@ import {
|
||||
FormControlProps,
|
||||
FormBaseControl,
|
||||
resolveEventData,
|
||||
ApiObject
|
||||
ApiObject,
|
||||
FormHorizontal
|
||||
} from 'amis-core';
|
||||
import {ActionObject, Api} from 'amis-core';
|
||||
import {ComboStore, IComboStore} from 'amis-core';
|
||||
@ -199,6 +200,11 @@ export interface ComboControlSchema extends FormBaseControlSchema {
|
||||
*/
|
||||
subFormMode?: 'normal' | 'horizontal' | 'inline';
|
||||
|
||||
/**
|
||||
* 如果是水平排版,这个属性可以细化水平排版的左右宽度占比。
|
||||
*/
|
||||
subFormHorizontal?: FormHorizontal;
|
||||
|
||||
/**
|
||||
* 没有成员时显示。
|
||||
* @default empty
|
||||
@ -1635,6 +1641,7 @@ export default class ComboControl extends React.Component<ComboProps> {
|
||||
multiple,
|
||||
tabsMode,
|
||||
subFormMode,
|
||||
subFormHorizontal,
|
||||
changeImmediately,
|
||||
lazyLoad,
|
||||
translate: __,
|
||||
@ -1651,6 +1658,7 @@ export default class ComboControl extends React.Component<ComboProps> {
|
||||
wrapperComponent: 'div',
|
||||
wrapWithPanel: false,
|
||||
mode: multiLine ? subFormMode || 'normal' : 'row',
|
||||
horizontal: subFormHorizontal,
|
||||
className: cx(`Combo-form`, formClassName)
|
||||
},
|
||||
{
|
||||
@ -1673,6 +1681,7 @@ export default class ComboControl extends React.Component<ComboProps> {
|
||||
wrapperComponent: 'div',
|
||||
wrapWithPanel: false,
|
||||
mode: tabsMode ? subFormMode : multiLine ? subFormMode : 'row',
|
||||
horizontal: subFormHorizontal,
|
||||
className: cx(`Combo-form`, formClassName)
|
||||
},
|
||||
{
|
||||
|
Loading…
Reference in New Issue
Block a user