SAP

SAP UI5 应用开发教程之三十三 - SAP UI5 应用的

2022-02-05  本文已影响0人  _扫地僧_

所谓响应式设计,是指通过各种前端技术,为页面元素赋予了根据屏幕分辨率的变化而自动调整显示行为,以达到最佳显示效果的能力。

SAP UI5 许多标准控件,特别是命名空间 sap.m 下的控件,都提供了开箱即用的响应式布局特性(Responsiveness),本文就通过其中典型的 sap.m.Table 来学习。

进入文件夹 33,依次执行命令行 npm installui5 serve, 然后访问 url:

http://localhost:8080/webapp/test/mockServer.html

能看到如下页面:

可以看到发票列表默认情况下,包含了五列,从左到右依次显示。

打开 Chrome 开发者工具,切换到 Elements 面板,点击切换设备按钮,然后选择 iPhone 12 Pro,可以发现之前默认在 PC 端从左到右依次显示的 5 列,变成了 4 列,Supplier 字段的数据消失了,剩下的三个字段,也合并为一列显示,以适配 iPhone 12 Pro 相对狭窄的屏幕尺寸。

下面是这个例子的实现全步骤。

上一篇下一篇

猜你喜欢

热点阅读