如何根據布林值動態地將顏色應用於SAP.m文字控制項？

使用「class」屬性綁定控制項- 使用自訂資料的解決方法

此問題解決了將顏色動態應用於中的值的挑戰是基於布林值的SAP.m 文字控制項。雖然以下 XML 程式碼看起來符合邏輯，但它無法更改控制項的類別：

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

UI5 不允許在 XML 視圖中直接進行類別綁定。但是，有使用自訂資料的解決方法：

1. 使用writeToDom 集合新增自訂資料：
   在控制項中包含自訂資料元素：

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

2. 定義CSS選擇器：
   在CSS 中加入對應的選擇器：

   <code class="css">.myApp .sapControlXYZ.myControl[data-green] { /* ... */ }</code>

這將新增根據writeToDom 中的表達式綁定，將data-green 新增到控制項的HTML 元素。然後瀏覽器可以相應地更改顏色。

範例：

<code class="xml"><Text
  class="myControl"
  text="{value}"
>
  <customData>
    <core:CustomData xmlns:core="sap.ui.core"
      writeToDom="{= ${value} === 'TRUE' }"
      key="green"
      value=""
    />
  </customData>
</Text></code>

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

注意：

SAP建議不要使用自訂CSS，尤其是對於具有預定義顏色或格式的控制項。自訂樣式可能會影響應用程式的一致性並增加維護工作量。在修改樣式之前諮詢利害關係人。

以上是如何根據布林值動態地將顏色應用於SAP.m文字控制項？的詳細內容。更多資訊請關注PHP中文網其他相關文章！