SAPUI5更改圖標的顏色

Question

我想使用圖標並根據型號更改顏色。

var wirelessHeadItem = new sap.ui.unified.ShellHeadItem({ 
    icon: "sap-icon://upload-to-cloud" 
}); 

我如何定義圖標的顏色是這樣的：

style: "color:{/oSettingsModel/isOnline}" 

這樣的圖標會改變顏色，當我在oSettingsModel改變isOnline。

Answer 1

好吧，似乎這個控件沒有可能通過標準屬性指定顏色，因此您可以使用custom data attribute和expression binding來應用變通方法。

主要的一點是，你可以指定自定義數據項的writeToDom屬性，並在你的CSS可以定義樣式所需的HTML屬性值：數據色綠色或數據 - 顏色紅色。

JS：

var wirelessHeadItem = new sap.ui.unified.ShellHeadItem({ 
    icon: "sap-icon://upload-to-cloud", 
    customData: [ 
     new sap.ui.core.CustomData({ 
      key: "color", 
      value: "{= ${/oSettingsModel/isOnline} ? 'green' : 'red' }", 
      writeToDom: true 
     }); 
    ] 
}); 

CSS可能是這樣的：

div[data-color=green] { 
    color: green; 
} 
div[data-color=red] { 
    color: red; 
}