Comment se lier aux classes CSS dans les vues XML UI5 à l'aide de l'attribut « class » ?

Liaison dans Control avec l'attribut "class"

La liaison aux classes CSS dans les vues XML via l'attribut "class" n'est pas directement prise en charge par UI5. Cependant, une solution de contournement utilisant des données personnalisées peut être implémentée :

Utilisation de données personnalisées pour la liaison

1. Ajoutez des données personnalisées à votre contrôle, en définissant la propriété writeToDom et en la liant au expression souhaitée :

   <code class="xml"><Text class="myControl">
     <customData>
       <core:CustomData writeToDom="{= myExpression }" key="green" value="" />
     </customData>
   </Text></code>

   Copier après la connexion

2. Définissez un sélecteur CSS qui cible le contrôle en fonction de la valeur des données personnalisées. Par exemple :

   <code class="css">.myApp .sapText.myControl[data-green] { /* ... */ }</code>

   Copier après la connexion

Exemple

Dans l'exemple suivant, la classe "green" est ajoutée au contrôle lorsque sa propriété "enabled" est vraie :

<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>

Considérations

• Bien que la liaison à des données personnalisées permette de manipuler les styles CSS, il est important de prendre en compte les éléments suivants :
• Les styles CSS personnalisés doivent être utilisés avec prudence, car ils peuvent avoir un impact sur la cohérence et la maintenance de l'interface utilisateur.
• Explorez des solutions alternatives, telles que l'utilisation de classes sémantiques ou de formateurs personnalisés, avant de recourir à des CSS personnalisés.

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!