SAPUI5 Changing Color of Icon

问题:

I would like to use an icon and change the color depending on the model.

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

How can I define the color of the icon to something like this:

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

That way the icon would change in color, when I change isOnline in the oSettingsModel.

回答1:

Well, seems that this control does not have either a possibility to specify the color via standard property, therefore you can apply the workaround using custom data attribute and expression binding.

The main point is that you can specify the writeToDom attribute of the custom data item, and in your CSS you can define the style for the needed HTML attribute value: data-color-green or 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 might look like this:

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