ブール値に基づいて 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 Set を使用してカスタム データを追加します:
   コントロールにカスタム データ要素を含めます:

   <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 の式バインディングに基づいてコントロールの HTML 要素に data-green を追加します。ブラウザはそれに応じて色を変更できます。

例:

<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 中国語 Web サイトの他の関連記事を参照してください。