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,都是基于各种指标的使用设备的基本分类。


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


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



相关文章
|
5月前
|
算法 前端开发 C++
【Qt UI相关】Qt设置窗体或控件的背景色透明
【Qt UI相关】Qt设置窗体或控件的背景色透明
529 0
|
5月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
|
5月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
|
5月前
|
安全 开发者
什么是 SAP ABAP 调试器里的 TRFC Block Sending 设置
什么是 SAP ABAP 调试器里的 TRFC Block Sending 设置
|
5月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍
|
3月前
|
JavaScript API
【Element-UI】vue使用 this.$confirm区分取消与关闭,vue给this.$confirm设置多个按钮
【Element-UI】vue使用 this.$confirm区分取消与关闭,vue给this.$confirm设置多个按钮
205 0
|
3月前
【亲测有效】Element UI 自定义 Notification 通知样式不生效,设置this.$notify样式不生效问题
【亲测有效】Element UI 自定义 Notification 通知样式不生效,设置this.$notify样式不生效问题
77 0
|
5月前
|
监控 测试技术
SAP 电商云修改 Product Catalog Staged 版本数据后,同步到 online 版本的 UI 操作
SAP 电商云修改 Product Catalog Staged 版本数据后,同步到 online 版本的 UI 操作
什么是 SAP ABAP 里的 Subscreen
什么是 SAP ABAP 里的 Subscreen
什么是 SAP ABAP 里的 Subscreen
|
5月前
|
开发者 UED
关于 SAP UI5 sap.m.Column 的 demandPopin 属性
关于 SAP UI5 sap.m.Column 的 demandPopin 属性

热门文章

最新文章

下一篇
无影云桌面