SAPUI5更改图标的颜色

Question

我想使用图标并根据模型更改颜色.

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

如何将图标的颜色定义为以下内容:

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

这样,当我在oSettingsModel中更改isOnline时,图标的颜色会发生变化.

Answer 1

好吧,似乎这个控件没有可能通过标准属性指定颜色,因此您可以使用自定义数据属性和表达式绑定来应用变通方法.

重点是您可以指定自定义数据项的writeToDom属性,并且在CSS中您可以定义所需HTML属性值的样式:data-color-green或data-color-red.

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;
}