SAP UI5 应用开发教程之三十三 - SAP UI5 应用的
2022-02-05 本文已影响0人
_扫地僧_
所谓响应式设计,是指通过各种前端技术,为页面元素赋予了根据屏幕分辨率的变化而自动调整显示行为,以达到最佳显示效果的能力。
SAP UI5 许多标准控件,特别是命名空间 sap.m
下的控件,都提供了开箱即用的响应式布局特性(Responsiveness),本文就通过其中典型的 sap.m.Table
来学习。
进入文件夹 33,依次执行命令行 npm install
和 ui5 serve
, 然后访问 url:
http://localhost:8080/webapp/test/mockServer.html
能看到如下页面:
可以看到发票列表默认
情况下,包含了五列,从左到右依次显示。
打开 Chrome 开发者工具,切换到 Elements 面板,点击切换设备按钮,然后选择 iPhone 12 Pro
,可以发现之前默认在 PC 端从左到右依次显示的 5 列,变成了 4 列,Supplier 字段的数据消失了,剩下的三个字段,也合并为一列显示,以适配 iPhone 12 Pro
相对狭窄的屏幕尺寸。
下面是这个例子的实现全步骤。