Wie binde ich mithilfe des Attributs „class' an CSS-Klassen in UI5-XML-Ansichten?

Bindung in Control mit dem Attribut „class“

Die Bindung an CSS-Klassen in XML-Ansichten über das Attribut „class“ wird von UI5 nicht direkt unterstützt. Es kann jedoch eine Problemumgehung mithilfe benutzerdefinierter Daten implementiert werden:

Verwenden benutzerdefinierter Daten zum Binden

1. Fügen Sie benutzerdefinierte Daten zu Ihrem Steuerelement hinzu, legen Sie die Eigenschaft writeToDom fest und binden Sie sie an die gewünschter Ausdruck:

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

   Nach dem Login kopieren

2. Definieren Sie einen CSS-Selektor, der das Steuerelement basierend auf dem benutzerdefinierten Datenwert anspricht. Zum Beispiel:

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

   Nach dem Login kopieren

Beispiel

Im folgenden Beispiel wird die Klasse „grün“ zur Klasse hinzugefügt. steuern, wenn die Eigenschaft „enabled“ wahr ist:

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

Überlegungen

• Während die Bindung an benutzerdefinierte Daten die Manipulation von CSS-Stilen ermöglicht, ist es wichtig, Folgendes zu berücksichtigen :
• Benutzerdefinierte CSS-Stile sollten mit Vorsicht verwendet werden, da sie sich auf die Konsistenz und Wartung der Benutzeroberfläche auswirken können.
• Erkunden Sie alternative Lösungen, z. B. die Verwendung semantischer Klassen oder benutzerdefinierter Formatierer, bevor Sie auf benutzerdefiniertes CSS zurückgreifen.

Das obige ist der detaillierte Inhalt vonWie binde ich mithilfe des Attributs „class' an CSS-Klassen in UI5-XML-Ansichten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!