如何使用「class」屬性綁定到 UI5 XML 視圖中的 CSS 類別？

使用「class」屬性綁定控制項

UI5 不直接支援透過「class」屬性綁定到 XML 視圖中的 CSS 類別。但是，可以實現使用自訂資料的解決方法：

使用自訂資料進行綁定

1. 將自訂資料新增至控制項，設定writeToDom 屬性並將其綁定到所需表達式：

   <code class="xml"><Text class="myControl">
     <customData>
       <core:CustomData writeToDom="{= myExpression }" key="green" value="" />
     </customData>
   </Text></code>

2. 定義一個基於自訂資料值定位控制項的CSS 選擇器。例如：

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

範例

在以下範例中，「green」類別被加入 中。當其「enabled」屬性為true 時進行控制：

<code class="xml"><Text class="myControl">
  <customData>
    <core:CustomData writeToDom="{= ${myTable>enabled} ? 'green' : 'red' }" key="green" value="" />
  </customData>
</Text></code>

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

注意事項

• 雖然綁定到自訂資料允許操作CSS 樣式，但重要的是要考慮以下事項:
• 應謹慎使用自訂CSS 樣式，因為它們會影響UI 一致性和維護。
• 在求助於自訂 CSS 之前，先探索替代解決方案，例如使用語義類別或自訂格式化程式。

以上是如何使用「class」屬性綁定到 UI5 XML 視圖中的 CSS 類別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！