SAP UI5 sap.ui.layout.Grid 控件宽度百分比的设置原理

简介: SAP UI5 sap.ui.layout.Grid 控件宽度百分比的设置原理

在 Chrome 开发者工具里使用 SAP UI5 扩展 Inspector 修改 Grid 控件的 defaultSpan 属性,会触发如下的代码:




我们通过调用栈,可以发现 SAP UI5 Grid 相关的框架代码调用,确实是 Chrome 扩展 UI5 Inspector 触发的:





相关代码:GridRenderer:



外层的 grid container 占据的是整个屏幕的宽度:




第一个 form container:占据屏幕 1/2 宽度:



6 6 6 12



但这里却是 3 3 6 12:



取得 grid 的 width:



默认值:3 3 6 12




Form container 内每个元素没有显式分配 width 吧?至少在 GridRender.js 里根据源代码搜索没有发现。这说明,是用其它方式来控制 Grid 内的元素相对位置的。



根据调试,发现这个 css 类控制了 50% 的宽度显示:.sapUiRespGridSpanL6




改成 80% 之后,就变宽了:



label 16.67% 2 / 12 等于六分之一:



为什么是2?



但为啥选择的是 L2,而不是 M3?



切换成 iPhone 之后:.sapUiRespGridMedia-Std-Phone.sapUiRespGridHSpace0>.sapUiRespGridSpanS4





CSS 类名称更改了,类型从之前的 Desktop 变成了 Phone.

4 除以 12 等于 1/3.

切换成 Tablet 之后,M3,四分之一:25%




这些出现在 CSS 类里的设备名称,无论是 Desktop,还是 Tablet,Phone,都是基于各种指标的使用设备的基本分类。


这些指标的例子是对触摸事件的支持、使用的操作系统和浏览器的用户代理。


注意:没有简单的方法可以从浏览器提供的信息中准确地确定使用的设备。 因此,我们特别依赖用户代理。 因此,结合给定的设备功能,可以将多个标志设置为真,特别是对于具有触摸功能的桌面设备和请求将网页作为桌面页面的移动设备来说。



相关文章
|
2月前
|
API
在阿里云RPA中,你可以使用"SetForegroundWindow"函数来将SAP控件置顶
【2月更文挑战第28天】 在阿里云RPA中,你可以使用"SetForegroundWindow"函数来将SAP控件置顶
23 1
|
2月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
29 0
|
2月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
17 0
|
29天前
什么是 SAP ABAP 里的 Subscreen
什么是 SAP ABAP 里的 Subscreen
16 1
什么是 SAP ABAP 里的 Subscreen
|
2月前
|
开发者 UED
关于 SAP UI5 sap.m.Column 的 demandPopin 属性
关于 SAP UI5 sap.m.Column 的 demandPopin 属性
15 0
|
2月前
SAP UI5 Link 控件的使用方法介绍 - 后续学习 Fiori Elements Smart Link 的基础试读版
SAP UI5 Link 控件的使用方法介绍 - 后续学习 Fiori Elements Smart Link 的基础试读版
15 0
|
2月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍
33 0
|
2月前
|
JSON 前端开发 测试技术
SAP UI5 sap.ui.core.util.MockServer.simulate 方法介绍
SAP UI5 sap.ui.core.util.MockServer.simulate 方法介绍
21 0
|
2月前
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
21 0
|
4月前
|
缓存 JavaScript 前端开发
如何理解 SAP UI5 的 sap.ui.define 函数?
如何理解 SAP UI5 的 sap.ui.define 函数?
52 0