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

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

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

1. カスタム データをコントロールに追加し、writeToDom プロパティを設定して、それを必要な式:

2. カスタム データ値に基づいてコントロールをターゲットとする CSS セレクターを定義します。例:

   .myApp .sapText.myControl[data-green] { /* ... */ }

Example

次の例では、「enabled」プロパティが設定されている場合に、「green」クラスが コントロールに追加されます。 true:

.myApp .sapText.myControl[data-green] { color: green; }
.myApp .sapText.myControl[data-red] { color: red; }

考慮事項

• カスタム データにバインドすると CSS スタイルを操作できますが、次の点を考慮することが重要です:
• カスタム CSS スタイルは慎重に使用する必要があります。 UI の一貫性とメンテナンスに影響を与える可能性があるため。
• カスタムに頼る前に、セマンティック クラスやカスタム フォーマッタの使用などの代替ソリューションを検討してください。 CSS.