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 的布局情况:



一个 form group,基于 balanced column layout:




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




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



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

相关文章
|
2月前
|
前端开发
Element UI 【实战】纯前端对表格数据进行增删改查(内含弹窗表单、数据校验、时间日期格式)
Element UI 【实战】纯前端对表格数据进行增删改查(内含弹窗表单、数据校验、时间日期格式)
120 6
|
1月前
|
计算机视觉
ElementUI——vue2+element-ui 2.x的动态表格和表单
ElementUI——vue2+element-ui 2.x的动态表格和表单
29 1
|
2月前
element UI 组件封装--搜索表单(含插槽和内嵌组件)
element UI 组件封装--搜索表单(含插槽和内嵌组件)
59 5
|
2月前
|
JavaScript
vue + element UI 表单中内嵌自定义组件的表单校验触发方案
vue + element UI 表单中内嵌自定义组件的表单校验触发方案
77 5
|
2月前
|
UED
Element UI 一键校验多表单(v-for循环表单,异步校验规则,v-for 中的 ref 属性,避坑 forEach 不支持异步 await )
Element UI 一键校验多表单(v-for循环表单,异步校验规则,v-for 中的 ref 属性,避坑 forEach 不支持异步 await )
36 0
|
4月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
|
4月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
|
4月前
|
Web App开发 数据采集 前端开发
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
|
4月前
|
XML 存储 数据格式
SAP UI5 控件 customData 属性的应用介绍
SAP UI5 控件 customData 属性的应用介绍
|
4月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍