ホームページ >ウェブフロントエンド >CSSチュートリアル >「class」属性を使用してUI5コントロールのテキストの色をバインドするにはどうすればよいですか?

「class」属性を使用してUI5コントロールのテキストの色をバインドするにはどうすればよいですか?

Linda Hamilton
Linda Hamiltonオリジナル
2024-10-31 05:30:30464ブラウズ

How can I bind text color in UI5 controls using the `class` attribute?

「class」属性によるコントロールのバインド

UI5 でのテキスト値の色のバインドは、次の方法でクラスを直接バインドするため、難しい場合があります。 XML はサポートされていません。ただし、カスタム データを使用した回避策があります:

カスタム データ アプローチ:

  1. コントロールで、writeToDom プロパティを に設定した CustomData 要素を追加します。あなたの拘束表現。これにより、バインド結果に基づいて HTML 属性が追加されます:

    <code class="xml"><Text class="myControl">
      <customData>
     <core:CustomData writeToDom="{= ${HintTable>IS_ENABLED} === 'TRUE' ? 'green' : 'red'}" key="green" value="" />
      </customData>
    </Text></code>
  2. CSS で、クラスと HTML 属性によってコントロールをターゲットにします:

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

例:

https://embed.plnkr.co/LAv1qfsUjX0Anu7S/

追加の考慮事項:

  • UI5 は、将来のリリースで重大な変更が加えられる可能性があるため、カスタム CSS の使用を警告します。
  • sap.m.ObjectStatus や sap.m.FormattedText などの特定のコントロールについては、セマンティックまたは業界 -特定の色がすでに適用されているため、カスタム CSS は必要ありません。
  • カスタム CSS を使用する場合の影響を常に考慮し、関係者と相談して、UI の一貫性を確保し、技術的負債を軽減してください。

以上が「class」属性を使用してUI5コントロールのテキストの色をバインドするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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