SAP UI5 SimpleForm 的 two-column layout 布局

简介: SAP UI5 SimpleForm 的 two-column layout 布局

如果您将表单放置在全屏应用程序中并且它包含多个表单组,请使用标签字段比例为 12:12:0 的两列布局(标签使用 12 个网格列,标签使用 12 个网格列 字段和空列使用的 0 个网格列)。


看个具体的例子:Form with several form groups (two columns) – Size M (12:12:0)

a8a836932be142f57bafce6200fc09c4.png


Size L (Desktop Screens)


如果表单包含单个表单组,请使用标签字段比例为 3:5:4 的单列布局(标签使用 3 个网格列,字段使用 5 个网格列,以及空列)。

6690de9e6d9177860e29cfecc85e0b20.png

如果表单包含多个表单组,您还可以使用标签字段比例为 12:12:0 的两列布局(标签使用 12 个网格列,字段使用 12 个网格列,0 个网格列 由空列使用)。 正如在响应性(断点)部分中已经解释的那样,大小 L 下降到 1025 像素。 在这种尺寸下,放置在字段旁边的长标签可能不适合较小的 L 尺寸屏幕(尤其是在拆分应用程序中)。 因此标签放在字段上方。


下图的例子:Form with several form groups (two columns) – Size L (12:12:0)

ddd6a001f525a9f5a3c98d3673ed3d7d.png


Size XL (Desktop Wide Screens)


如果表单包含单个表单组,请使用标签字段比例为 3:5:4 的单列布局(标签使用 3 个网格列,字段使用 5 个网格列,以及 空列)。


例子:Form with a single form group (one column) – Size XL (3:5:4)

5ea5bfd4683586c6e90ef03ae3f0ee65.png

响应式网格布局具有新属性 singleContainerFullSize。 此属性使您可以在表单中插入空列:例如,您可以将属性 columnsXL 设置为 2,用标签字段比为 4:8:0 的单个表单组填充一列(4 个网格列由 标签、字段使用的 8 个网格列和空列使用的 0 个网格列),并将第二列留空。


目录
相关文章
|
1月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
27 0
|
1月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
15 0
|
1月前
|
Web App开发 数据采集 前端开发
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
15 0
|
1月前
|
XML 存储 数据格式
SAP UI5 控件 customData 属性的应用介绍
SAP UI5 控件 customData 属性的应用介绍
33 0
|
1月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍
28 0
|
1月前
|
搜索推荐
如何让 SAP UI5 Smart Table 支持多项选择(Multiple-Selection)试读版
如何让 SAP UI5 Smart Table 支持多项选择(Multiple-Selection)试读版
18 0
|
1月前
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
20 0
|
2月前
|
Web App开发 前端开发 JavaScript
乱花渐欲迷人眼 - 让 SAP UI5 应用的日志输出不再素面朝天
乱花渐欲迷人眼 - 让 SAP UI5 应用的日志输出不再素面朝天
48 0
|
2月前
|
Web App开发 JSON JavaScript
SAP UI5 应用程序小技巧 - 一键将 JSON 对象导出成本地 json 文件
SAP UI5 应用程序小技巧 - 一键将 JSON 对象导出成本地 json 文件
25 0
|
2月前
|
XML 数据处理 数据格式
什么是 SAP UI5 XML Templating 技术
什么是 SAP UI5 XML Templating 技术
43 0