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.

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

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

Definieren Sie eine CSS-Stilklasse im CSS-Editor (Schaltflächenstile – W3Schools):

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:

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>

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:

Was this article helpful?