如果条件允许更改图标颜色 [英] Change icon color if condition

问题描述

我正在使用一个从模型打印数据的列表，并且应该有一个图标.问题是图标根据值而变化，我也应该改变它的颜色.

I am using a list that prints data from a model and one should have an icon. The thing is that the icon changes depending on the value and I should also change its color.

我认为:

<ObjectListItem title="State" type="Active" number="{/Data/8/state}"
icon="{= ${/Data/8/state}.toUpperCase() === 'OK' ? 'sap-icon://accept' : 
'sap-icon://decline' }"></ObjectListItem>

像 addStyleClass 这样的选项似乎不起作用.我通过将 css 添加到 SAP 添加到 Icon 的 id 来更改颜色，但由于它必须根据值更改，我不知道如何实现它.另一种选择是直接为这两个图标添加颜色，但我无法添加类.

Options like addStyleClass doesn't seem to work. I have changed the color by adding css to the id that SAP adds to the Icon, but since it has to change according to the value I don't know how to achieve it. Another option was to add color directly to these two icons but I wasn't able to add the classes.

推荐答案

您可以使用 CustomData 然后创建一个 css 选择器来匹配它:

You can use CustomData and then create a css selector to match it:

<ObjectListItem title="State" type="Active" number="{/Data/8/state}"
icon="{= ${/Data/8/state}.toUpperCase() === 'OK' ? 'sap-icon://accept' : 
'sap-icon://decline' }">
<customData>
  <core:CustomData writeToDom="true" key="class" value="{= ${/Data/8/state}.toUpperCase()}" />
</customData>
</ObjectListItem>

这将使用额外的 data-class 属性呈现您的控件(实际上，data-{key}，其中 key 是 <您在 core:CustomData 标签上定义的 code>key.

This will render your control with an additional data-class attribute (actually, data-{key}, where key is the key that you defined on your core:CustomDatatag).

然后您可以将其与 CSS 选择器进行匹配

You can then match that with the CSS selector

[data-class='OK'] {
  color: blue !important; 
}
[data-class='NOT-OK']{
  color: red !important;
}

这篇关于如果条件允许更改图标颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！