我做 SAP UI5 开发时遇到一个问题:

SAP UI5 CSS 类 sapUiSmallMarginEnd 的工作和添加原理

我在 XML 视图里,给 Button 控件分配了一个 CSS class:

sapUiSmallMarginEnd

期望运行时,该 CSS 类能够产生 1 rem 的 margin 效果:
SAP UI5 CSS 类 sapUiSmallMarginEnd 的工作和添加原理

上图来自 SAP UI5 官网的例子。

然而,我的例子运行出来失败了,我的 button 控件渲染出的 HTML 原生代码,并没有出现这个 CSS 类,我期望的 margin 效果并没有实现:
SAP UI5 CSS 类 sapUiSmallMarginEnd 的工作和添加原理

SAP UI5 CSS 类 sapUiSmallMarginEnd 的工作和添加原理

这个 class 存储在 aCustomStyleClasses 数组里:
SAP UI5 CSS 类 sapUiSmallMarginEnd 的工作和添加原理

在 XMLTemplateProcessor 里处理自定义 CSS:
SAP UI5 CSS 类 sapUiSmallMarginEnd 的工作和添加原理

SAP UI5 CSS 类 sapUiSmallMarginEnd 的工作和添加原理

自定义 class 在此处被写入:334 行
SAP UI5 CSS 类 sapUiSmallMarginEnd 的工作和添加原理

511行:
SAP UI5 CSS 类 sapUiSmallMarginEnd 的工作和添加原理

buttonRender.js 的第 130 行:

SAP UI5 CSS 类 sapUiSmallMarginEnd 的工作和添加原理

我的例子里,并没有解析出 aCustomClasses

SAP UI5 CSS 类 sapUiSmallMarginEnd 的工作和添加原理

SAP UI5 CSS 类 sapUiSmallMarginEnd 的工作和添加原理

回到我的代码,调试 1450行,为什么 CSSStyle 没有添加到 button 里:

SAP UI5 CSS 类 sapUiSmallMarginEnd 的工作和添加原理

8081 即 SAP 例子里,sStyleClasses 能够成功被解析出来:

SAP UI5 CSS 类 sapUiSmallMarginEnd 的工作和添加原理

但我的不行:
SAP UI5 CSS 类 sapUiSmallMarginEnd 的工作和添加原理

解析 CSS:
SAP UI5 CSS 类 sapUiSmallMarginEnd 的工作和添加原理

更多Jerry的原创文章,尽在:"汪子熙":
SAP UI5 CSS 类 sapUiSmallMarginEnd 的工作和添加原理

相关文章:

  • 2021-07-07
  • 2021-12-26
  • 2021-07-22
  • 2022-12-23
  • 2021-05-01
  • 2021-11-13
  • 2021-10-22
猜你喜欢
  • 2021-05-09
  • 2022-01-11
  • 2021-11-16
  • 2021-10-22
  • 2021-08-30
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案