So verwenden Sie den Simplifier CSS-Editor

Written by Christian Kleinschroth
Juli 24, 2024

Voraussetzungen

Eine Simplifier-Anwendung , die Sie formatieren möchten.

Das allgemeine Look & Feel der App sollte mit dem SAP UI Theme Designer realisiert werden.

Schritt 1 – Öffnen Sie den Simplifier CSS Editor

Wählen Sie im Anwendungseditor CSS-Editor aus, indem Sie auf Andere klicken ( Simplifier-Dokumentation):

Schritt 2 – Widgets nach Stilklasseneigenschaft formatieren

Sie können einem Widget CSS-Stilklassen über die Widget-Eigenschaft cssClasses zuweisen.

Um die Standardstile zu überschreiben, fügen Sie !important zu den Stilanweisungen hinzu.

  • Geben Sie den Namen der CSS-Stilklasse in das Eigenschaftsfeld cssClasses des Widgets im UI Designer (linkes Seitenfeld) ein:

Schritt 3 – Widgets nach ID formatieren

Sie können CSS-Stilklassen direkt zu Widgets zuweisen, indem Sie die ID des Widgets verwenden.

  • Definieren Sie eine CSS-Stilklasse im CSS-Editor mit der ID des Widgets als Klassenname:

Die Syntax für den Zugriff auf Widgets über ID mit CSS lautet: #<screenId>–<widgetId>

Schritt 4 – Formatieren von Widgets mithilfe von HTML-Elementklassen

Sie können CSS-Stilklassen zu Widgets zuweisen, indem Sie HTML-Elementklassen verwenden:

  • Überprüfen Sie die HTML-Elementklasse über die Browserkonsole (öffnen Sie die Browser-Konsole, klicken Sie mit der rechten Maustaste auf das Widget und wählen Sie Inspect):
  • Definieren Sie eine CSS-Stilklasse im CSS-Editor , indem Sie die HTML-Elementklassen des Widgets als Klassennamen verwenden:
Tags:

Was this article helpful?

 
Related Articles