css 在控件中绑定“class”属性

ezykj2lf  于 9个月前  发布在  其他
关注(0)|答案(3)|浏览(101)

我想处理文本控件(sap.m)中值的颜色。如果值为"TRUE",则颜色为绿色。否则,如果值为"FALSE",则颜色为红色。

<Text
  class="{= ${HintTable>IS_ENABLED} === 'TRUE' ? 'greenTextColor' : redTextColor'}"
  text="{HintTable>IS_ENABLED}"
/>

字符串
但它似乎不工作。我的意思是,class不能接收"greenTextColor"也不能接收"redTextColor"
我做错什么了吗?

llew8vvj

llew8vvj1#

在XML视图中 * 直接 * 为class绑定UI5 does not support,因为它不是ManagedObject的有效属性。但是,有一个解决方案,即添加自定义数据
1.将CustomDatawriteToDom属性一起添加到控件中。在那里使用表达式绑定:

<ControlXYZ class="myControl">
  <customData>
    <core:CustomData xmlns:core="sap.ui.core"
      writeToDom="{= expression }"
      key="green"
      value=""
    />
  </customData>
</ControlXYZ>

字符串
根据表达式绑定的结果,data-green将被添加到控件的HTML元素中。然后浏览器可以操作与attribute selector对应的颜色。
1.因此,你的CSS应该相应地包含选择器:

.myApp .sapControlXYZ.myControl[data-green] { /* ... */ }


下面是一个示例:https://embed.plnkr.co/LAv1qfsUjX0Anu7S/
当然,你也可以在value="{...}"中定义一个绑定,以增加CSS的特异性。

.myApp .sapControlXYZ.myControl[data-green="someBoundValue"] { /* ... */ }


要了解有关如何在DOM中利用自定义数据的更多信息,请查看文档主题Writing Data to the HTML DOM as DATA-* Attribute

使用自定义CSS之前请先阅读..️

可能有一些控件不需要自定义CSS。例如:

SAP explicitly warns不使用自定义CSS样式。
OpenUI 5生成的HTML和CSS不是公共API的一部分,可能会在补丁和次要版本中更改。如果您决定覆盖样式,则需要在每次OpenUI 5更新时测试和更新您的修改。[.]因此,SAPFiori launchpad应用程序不应覆盖样式。
一般来说,添加自定义CSS样式的重要性应该始终受到质疑,并与利益相关者进行双重检查,以提高Fiori应用程序之间的UI一致性并降低总体TCO。

ztigrdn8

ztigrdn82#

Boghyon Hoffmann的回答很棒!
但是如果他的选项都不适合你,你可以总是求助于使用Text元素的两个不同副本以及visible属性(它支持表达式绑定):

<Text
  class="greenTextColor"
  text="{HintTable>IS_ENABLED}"
  visible="{= ${HintTable>IS_ENABLED === 'TRUE'} }"
/>
<Text
  class="redTextColor"
  text="{HintTable>IS_ENABLED}"
  visible="{= ${HintTable>IS_ENABLED !== 'TRUE'} }"
/>

字符串

提示:

如果你的模型包含布尔值而不是字符串,请检查你的表达式:

visible="{= ${HintTable>IS_ENABLED} }"


visible="{= !${HintTable>IS_ENABLED} }"

xsuvu9jc

xsuvu9jc3#

1.如果你使用本地JSONModel作为HintTable,并且IS_ENABLED属性位于模型的根级别,你必须使用斜杠"HintTable>/IS_ENABLED"来访问它。试试吧。
1.我不确定你是否可以绑定类属性。从来没有尝试过。

相关问题