SAP UI5 Form 表单 Column Layout 下的 Column 个数分配问题

简介: SAP UI5 Form 表单 Column Layout 下的 Column 个数分配问题

ColumnLayout 控件以基于列的响应方式呈现表单组。 根据其大小,该组被分为一列或多列。


XL – max. 6 columns


L – max. 3 columns


M – max. 2 columns


S – 1 column


对于 XL 码,SAP 建议对包含大量内容的大型表单使用完整的 6 列。 这在组织内容和表单组时为用户提供了更大的灵活性。


为了更好地利用屏幕空间并在不滚动的情况下为用户提供更好的概览,我们可以跨多个列平衡表单组。 根据组元素的数量及其大小,组元素分散到列中。


听起来有点抽象?


看个具体的例子:


4 列和 2 组:每组将使用 2 列。


3 列 2 组:较大的使用 2 列,较小的使用 1 列。


组元素(group element)的大小将由分配给它的可见元素(visible element)的数量决定。

如果组多于列,则每个组仅使用一列。 所以表单控件的最后一行不会被完全使用。 这将导致空白。


表单元素散布到以类似报纸的顺序排列的组的列中。 标签和字段的位置取决于所用列的大小。 如果有足够的空间,标签在字段旁边,否则在字段上方。


如果使用默认表单设置,每个表单组将显示在单独的列中。 根据表单组的大小,这可能意味着用户需要向下滚动才能查看完整的表单,即使屏幕右侧有未使用的空间。


下图是一个默认的 form group 的布局情况:

fca77bcaca1719945ffa8b723a6f7817.png

一个 form group,基于 balanced column layout:

21bc9f7775bcf5755f63f50912e66f2a.png

2 个 form groups,使用默认布局:

12295d676bb13a2db3e1944958f315a5.png

2 个 form groups,使用 balanced column 布局:

604f24ea725b88861b0c0ec7428db6ed.png

在 Dynamicforms 中,表单的内容、行为和样式由 JSON 定义。 要创建表单,开发人员需要添加表单控件并定义其属性,例如控件类型、名称、标签等。


目录
相关文章
|
13天前
【UI】 element -ui select下拉框label显示多个值
【UI】 element -ui select下拉框label显示多个值
17 1
|
6月前
|
JavaScript
element-UI el-table动态显示隐藏列造成固定一侧的列(fixed=“left/right“)错误显示
问题原因:多个tabs共用一个实体,动态显示隐藏列 出现了固定在右侧的列(fixed="right")错位 【解决方案】 表格的重新布局,只要table数据发生变化的时候就重新渲染表格 ```js this.$nextTick(() => { this.$refs.formname.doLayout() }) ``` 参考element官方文档 ![请在此添加图片描述](https://developer-private-1258344699.cos.ap-guangzhou.myqcloud.com/column/article/5877188/20231030-e40
92 0
element-UI el-table动态显示隐藏列造成固定一侧的列(fixed=“left/right“)错误显示
element-ui table排序sortable三种状态,怎么去掉默认状态
在 element-ui 中,也定义了 sort-orders 有三种状态: ascending、descending、null,这三种状态形成一个循环切换。
2181 0
|
1月前
|
容器
QML之定位器(Column,Row,Flow,Grid)
QML之定位器(Column,Row,Flow,Grid)
30 2
|
4月前
ant-design 设置Form.Item中的input框的值的方法
ant-design 设置Form.Item中的input框的值的方法
57 0
|
6月前
|
JSON 数据格式
SAP UI5 Form 表单 Column Layout 下的 Column 个数分配问题
SAP UI5 Form 表单 Column Layout 下的 Column 个数分配问题
19 0
|
6月前
【element-ui用法】el-radio-group默认选择和数据回显问题的解决方案
【element-ui用法】el-radio-group默认选择和数据回显问题的解决方案
214 0
|
6月前
|
前端开发
SAP UI5 SimpleForm M 和 L 型表单的 label 和 input 分配讲解
SAP UI5 SimpleForm M 和 L 型表单的 label 和 input 分配讲解
29 0
|
6月前
SAP UI5 Responsive Grid Layout 里的 Label-Field Ratio 在屏幕类型 S 下的表现
对于 SAP UI5 SimpleForm 的每种尺寸,我们可以定义用于标签(labelSpanXL、labelSpanL、labelSpanM、labelSpanS)、字段(隐式)和空网格列(emptySpanXL、emptySpanL、emptySpanM、emptySpanS)的网格列数。
24 0
Element UI - el-select 同时获取 value 和 label 的值
Element UI - el-select 同时获取 value 和 label 的值
511 0