Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie kann ich Textfarben in UI5-Steuerelementen mithilfe des Attributs „class' binden?

Linda Hamilton
Freigeben: 2024-10-31 05:30:30
Original
369 Leute haben es durchsucht

How can I bind text color in UI5 controls using the `class` attribute?

Binding in Control mit dem Attribut „class“

Das Binden der Farbe von Textwerten in UI5 kann schwierig sein, da die Klasse direkt über gebunden wird XML wird nicht unterstützt. Es gibt jedoch eine Problemumgehung mit benutzerdefinierten Daten:

Ansatz für benutzerdefinierte Daten:

  1. Fügen Sie in Ihrem Steuerelement ein CustomData-Element hinzu, dessen Eigenschaft „writeToDom“ auf festgelegt ist Ihr verbindlicher Ausdruck. Dadurch wird ein HTML-Attribut basierend auf dem Bindungsergebnis hinzugefügt:

    <code class="xml"><Text class="myControl">
      <customData>
     <core:CustomData writeToDom="{= ${HintTable>IS_ENABLED} === 'TRUE' ? 'green' : 'red'}" key="green" value="" />
      </customData>
    </Text></code>
    Nach dem Login kopieren
  2. Zielen Sie in Ihrem CSS das Steuerelement nach seiner Klasse und dem HTML-Attribut:

    <code class="css">.myApp .sapText.myControl[data-green='green'] { color: green; }  </code>
    Nach dem Login kopieren

Beispiel:

https://embed.plnkr.co/LAv1qfsUjX0Anu7S/

Zusätzliche Überlegungen:

  • UI5 warnt vor der Verwendung von benutzerdefiniertem CSS aufgrund möglicher Breaking Changes in zukünftigen Versionen.
  • Für bestimmte Steuerelemente, wie z. B. sap.m.ObjectStatus oder sap.m.FormattedText, semantische oder branchenspezifische Es werden bereits spezifische Farben angewendet, sodass kein benutzerdefiniertes CSS erforderlich ist.
  • Bedenken Sie immer die Auswirkungen der Verwendung von benutzerdefiniertem CSS und konsultieren Sie die Beteiligten, um die Konsistenz der Benutzeroberfläche sicherzustellen und technische Schulden zu reduzieren.

Das obige ist der detaillierte Inhalt vonWie kann ich Textfarben in UI5-Steuerelementen mithilfe des Attributs „class' binden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!