ホームページ  >  記事  >  ウェブフロントエンド  >  ブール値に基づいて SAP.m テキスト コントロールに色を動的に適用する方法

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

Susan Sarandon
Susan Sarandonオリジナル
2024-10-31 06:30:30244ブラウズ

How to Dynamically Apply Colors to SAP.m Text Control Based on Boolean Values?

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。