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属性值的样式： data-color-绿色或数据 - 颜色 - 红色。

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

Answer 2

更简单的方法是将其放入hbox并设置class =“ colorCode” 在css文件中，设置类的颜色

SAPUI5更改图标的颜色

2 个答案: