「class」属性を使用して UI5 XML ビューの CSS クラスにバインドするにはどうすればよいですか?

「class」属性を使用したコントロールでのバインド

「class」属性を使用した XML ビューの CSS クラスへのバインドは、UI5 では直接サポートされていません。ただし、カスタム データを使用した回避策は実装できます。

バインドにカスタム データを使用する

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