Aktueller Release

Previous
Vermögen
Next
Bibliotheken

CSS-Editor

11 views 0 Updated on January 29, 2025

Voraussetzungen

Ein Simplifier-Anwendung , die Sie formatieren möchten

UI5 und CSS: Bitte beachten Sie, dass CSS-Direktiven hauptsächlich für Designzwecke und nicht für grundlegende Layouts verwendet werden, um die Reaktionsfähigkeit von UI5 zu erhalten. Für Designzwecke wird empfohlen, die Designfunktionalität von UI5 zu verwenden

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 (rechte Seitenleiste) ein:

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

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:
Related Articles