ブール値に基づいて SAP.m テキスト コントロールに色を動的に適用する方法

「class」属性を使用したコントロールのバインディング - カスタム データでの回避策

この質問は、値に色を動的に適用するという課題に対処します。ブール値に基づく SAP.m テキスト コントロール。次の XML コードは論理的であるように見えますが、コントロールのクラスを変更することはできません。

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

UI5 では、XML ビューでの直接クラス バインディングが許可されていません。ただし、カスタム データを使用した回避策があります:

1. writeToDom Set を使用してカスタム データを追加します:
   コントロールにカスタム データ要素を含めます:

   <code class="xml"><controlxyz class="myControl">
     <customdata>
       <customdata xmlns:core="sap.ui.core" writetodom="{= expression }" key="green" value=""></customdata>
     </customdata>
   </controlxyz></code>

2. CSS セレクターを定義します:
   CSS に対応するセレクターを追加します:

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

これにより、 writeToDom の式バインディングに基づいてコントロールの HTML 要素に data-green を追加します。ブラウザはそれに応じて色を変更できます。

例:

<code class="xml"><text class="myControl" text="{value}">
  <customdata>
    <customdata xmlns:core="sap.ui.core" writetodom="{= ${value} === 'TRUE' }" key="green" value=""></customdata>
  </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 中国語 Web サイトの他の関連記事を参照してください。