0
点赞
收藏
分享

微信扫一扫

关于 SAP UI5 控件的 Densities 话题讨论


所有属于 ​​sap.m​​库的控件的默认设计是Cozy密度,这意味着更大的尺寸和间距。

如果我们的应用程序只使用 ​​sap.m​​​库,并且 Cozy的密度正是项目所需要的,这种情况下可以跳过设置CSS类。然而,属于其他库的控件也可能支持 ​​Cozy​​​的设计(如sap.ui.table.Table),但默认值可能不同(如Compact密度)。因此,如果 SAP UI5 应用程序使用属于不同库的控件,则建议设置CSS类 ​​sapUiSizeCozy​​.

如何根据设备尺寸的不同,智能的设置对应的 Densities CSS 类?一个解决方案如下图所示:

(1) 使用 ​​sap.ui.define​​​ 导入 SAP UI5 标准的 Device API,并作为输入参数 Device,参看图例 (2) .
(3) Device.system.desktop 为 true,则说明是在桌面环境下。

关于 SAP UI5 控件的 Densities 话题讨论_ui5

sap.ui.define([
'sap/ui/core/mvc/Controller',
'sap/ui/model/odata/v2/ODataModel',
'sap/rules/ui/services/ExpressionLanguage',
'sap/ui/core/util/MockServer',
'sap/m/MessageToast',
'sap/ui/Device'
], function (Controller, ODataModel, ExpressionLanguage, MockServer, MessageToast,) {
"use strict";

return Controller.extend("sap.ui5.walkthrough.Page", {

onInit: function () {

this.getView().addStyleClass(Device.system.desktop ? "sapUiSizeCompact" : "sapUiSizeCozy");

SAP UI5 控件的 Densities 检测是由相关的CSS类触发的,例如,​​sapUiSizeCompact​​​ 用于Compact密度,设置在你想要使用控件的 UI 区域的​​父元素​​上。这意味着 UI 的某些部分或 sap.m. shell 中的不同应用程序可以使用 sap.m 控件的标准密度,而其他部分可以同时使用不同的密度。

然而,UI部分的子部分, 如果已经被设置为使用 Compact CSS 类,则它们无法再使用 Cozy 设计,因为CSS类会影响整个HTML子树。

由于对话框和其他弹出框位于 HTML文档的 root 节点,开发人员必须将这些元素的CSS类设置为相应的 densities 值。CSS 类只影响子控件。不能通过添加CSS类使控件本身施加 Compact 或 Cozy 设计。相反,任何时候都应该在父容器上设置CSS类,例如视图(view)或组件(Component)。


举报

相关推荐

关于 SAP UI5 Web Components

0 条评论