Maison >interface Web >tutoriel CSS >Comment lier les modifications de couleur à l'attribut de classe d'un contrôle en vue XML ?

Comment lier les modifications de couleur à l'attribut de classe d'un contrôle en vue XML ?

DDD
DDDoriginal
2024-10-30 07:17:27910parcourir

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

Liaison dans le contrôle avec l'attribut "class" : solution de contournement pour la vue XML

En vue XML, la liaison directe de la propriété de classe d'un contrôle est pas pris en charge. Pour obtenir le changement de couleur souhaité en fonction d'une valeur, vous pouvez exploiter des données personnalisées comme solution de contournement.

Étape 1 : Ajouter des données personnalisées avec writeToDom

Sous votre contrôle, ajoutez des données personnalisées avec la propriété writeToDom définie sur la liaison d'expression qui détermine la couleur. Par exemple :

<code class="xml"><Text class="myTextColor">
  <customData>
    <core:CustomData writeToDom="{= ${HintTable>IS_ENABLED} === 'TRUE' ? 'data-green' : 'data-red'}" key="color" value="" />
  </customData>
</Text></code>

Étape 2 : Personnalisez le CSS avec le sélecteur d'attribut

Dans votre CSS, utilisez un sélecteur d'attribut pour manipuler la couleur en fonction du vert des données ou attribut data-red ajouté au contrôle. Par exemple :

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

.myTextColor[data-red] {
  color: red;
}</code>

Considérations supplémentaires :

  • Envisagez d'utiliser des contrôles avec des couleurs sémantiques ou spécifiques à un secteur intégré au lieu de CSS personnalisés.
  • Notez que SAP déconseille de remplacer les styles par défaut pour garantir la cohérence de l'interface utilisateur et réduire le coût total de possession.
  • Reportez-vous à la documentation sur l'écriture de données dans le DOM HTML en tant qu'attribut DATA-* pour plus d'informations sur l'utilisation de données personnalisées.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn