ホームページ > ウェブフロントエンド > CSSチュートリアル > XML ビューで色の変更をコントロールのクラス属性にバインドするにはどうすればよいですか?

XML ビューで色の変更をコントロールのクラス属性にバインドするにはどうすればよいですか?

DDD
リリース: 2024-10-30 07:17:27
オリジナル
905 人が閲覧しました

How to Bind Color Changes to a Control's Class Attribute in XML View?

「class」属性を使用したコントロールでのバインド: XML ビューの回避策

XML ビューでは、コントロールのクラス プロパティを直接バインドします。サポートされていません。値に基づいて目的の色の変更を実現するには、回避策としてカスタム データを利用できます。

ステップ 1: writeToDom を使用してカスタム データを追加する

コントロール内で、 writeToDom プロパティを色を決定する式バインディングに設定してカスタム データを追加します。例:

<code class="xml"><Text class="myTextColor">
  <customData>
    <core:CustomData writeToDom="{= ${HintTable>IS_ENABLED} === 'TRUE' ? 'data-green' : 'data-red'}" key="color" value="" />
  </customData>
</Text></code>
ログイン後にコピー

ステップ 2: 属性セレクターを使用して CSS をカスタマイズする

CSS で、属性セレクターを使用してデータグリーンに基づいて色を操作します。または data-red 属性がコントロールに追加されました。例:

<code class="css">.myTextColor[data-green] {
  color: green;
}

.myTextColor[data-red] {
  color: red;
}</code>
ログイン後にコピー

追加の考慮事項:

  • カスタム CSS の代わりに、セマンティックまたは業界固有の色が組み込まれたコントロールの使用を検討してください。
  • SAP では、UI の一貫性を確保し TCO を削減するためにデフォルト スタイルをオーバーライドしないことを推奨していることに注意してください。
  • カスタム データの使用の詳細については、DATA-* 属性として HTML DOM へのデータの書き込みに関するドキュメントを参照してください。

以上がXML ビューで色の変更をコントロールのクラス属性にバインドするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート