首页 >web前端 >css教程 >如何使用'class”属性绑定 UI5 控件中的文本颜色?

如何使用'class”属性绑定 UI5 控件中的文本颜色?

Linda Hamilton
Linda Hamilton原创
2024-10-31 05:30:30466浏览

How can I bind text color in UI5 controls using the `class` attribute?

使用“class”属性绑定控件

在 UI5 中绑定文本值的颜色可能很棘手,因为直接通过以下方式绑定类不支持 XML。但是,存在使用自定义数据的解决方法:

自定义数据方法:

  1. 在您的控件中,添加一个 CustomData 元素,并将 writeToDom 属性设置为你的绑定表达。这将根据绑定结果添加 HTML 属性:

    <code class="xml"><Text class="myControl">
      <customData>
     <core:CustomData writeToDom="{= ${HintTable>IS_ENABLED} === 'TRUE' ? 'green' : 'red'}" key="green" value="" />
      </customData>
    </Text></code>
  2. 在 CSS 中,通过其类和 HTML 来定位控件属性:

    <code class="css">.myApp .sapText.myControl[data-green='green'] { color: green; }  </code>

示例:

https://embed.plnkr.co/LAv1qfsUjX0Anu7S/

附加注意事项:

  • UI5 警告不要使用自定义 CSS,因为未来版本中可能会发生重大更改。
  • 对于某些控件,例如 sap.m.ObjectStatus 或 sap.m .FormattedText、语义或行业特定的颜色已经应用,无需自定义 CSS。
  • 始终考虑其含义使用自定义 CSS 并与利益相关者协商,以确保 UI 一致性并减少技术债务。

以上是如何使用'class”属性绑定 UI5 控件中的文本颜色?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn