Question

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

我认为：

async: false

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

Answer 1

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

<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是您在key标记上定义的core:CustomData ）。

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

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

如果条件，更改图标颜色

1 个答案: