关于前端:SAP-UI5-sapuilayoutGrid-控件宽度百分比的设置原理

30次阅读

共计 775 个字符,预计需要花费 2 分钟才能阅读完成。

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

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

留神:没有简略的办法能够从浏览器提供的信息中精确地确定应用的设施。因而,咱们特地依赖用户代理。因而,联合给定的设施性能,能够将多个标记设置为真,特地是对于具备触摸性能的桌面设施和申请将网页作为桌面页面的挪动设施来说。

正文完
 0