天天看點

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

我做 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 的工作和添加原理

這個 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 的工作和添加原理

回到我的代碼,調試 1450行,為什麼 CSSStyle 沒有添加到 button 裡:

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

8081 即 SAP 例子裡,sStyleClasses 能夠成功被解析出來:

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

但我的不行:

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

解析 CSS:

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