根据模型值更改CSS样式 [英] Changing CSS style depending on the model value

问题描述

我想使用图标并根据型号更改颜色。

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

这样，当我在oSettingsModel中更改isOnline时，图标的颜色就会改变。

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

推荐答案

好吧，似乎该控件无法通过标准属性指定颜色，因此您可以使用自定义数据属性和表达式绑定。

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.

要点是，您可以在自定义数据项的 writeToDom 属性中指定您可以为所需的HTML属性值定义样式的CSS： data-color-gree n 或 data-color-red 。

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可能看起来像这样：

CSS might look like this:

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

这篇关于根据模型值更改CSS样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！