Voraussetzungen

Eine Simplifier-Anwendung, die du gestalten möchtest

UI5 und CSS: Bitte beachten Sie, CSS-Direktiven hauptsächlich für Designzwecke und nicht für grundlegendes Layout zu verwenden, um die Reaktionsfähigkeit von UI5 zu erhalten. Für Designzwecke empfehlen wir die Verwendung der Theming-Funktionalität von UI5

Das allgemeine Erscheinungsbild der App sollte mit dem SAP UI Theme Designer realisiert werden.

Schritt 1 – Simplifier CSS-Editor öffnen

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

Schritt 2 – Widgets über die Style-Class-Eigenschaft gestalten

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

Definieren Sie eine CSS-Style-Klasse im CSS-Editor (Button Styles – W3Schools):

Um die Standardstile zu überschreiben, fügen Sie !important zu den Style-Anweisungen hinzu.

Geben Sie den Namen der CSS-Style-Klasse in das Eigenschaftsfeld cssClasses des Widgets im UI Designer ein (rechte Seitenleiste):

Bitte verwenden Sie ein Leerzeichen, um mehrere Klassen im Eigenschaftsfeld cssClasses zu trennen.

Schritt 3 – Widgets nach ID gestalten

Sie können Widgets direkt CSS-Style-Klassen zuweisen, indem Sie die Widget-ID verwenden.

Definieren Sie eine CSS-Style-Klasse im CSS-Editor, indem Sie die Widget-ID als Klassennamen verwenden:

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

Schritt 4 – Widgets mit HTML-Elementklassen gestalten

Sie können Widgets CSS-Style-Klassen mithilfe von HTML-Elementklassen zuweisen:

Überprüfen Sie die HTML-Elementklasse über die Browserkonsole (Browserkonsole öffnen, Rechtsklick auf das Widget und Untersuchen auswählen):

Definieren Sie eine CSS-Style-Klasse im CSS-Editor, indem Sie die HTML-Elementklassen des Widgets als Klassennamen verwenden:

Aktueller Release

CSS-Editor