首頁  >  文章  >  web前端  >  如何使用「class」屬性綁定 UI5 控制項中的文字顏色?

如何使用「class」屬性綁定 UI5 控制項中的文字顏色?

Linda Hamilton
Linda Hamilton原創
2024-10-31 05:30:30369瀏覽

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