Aktueller Release

Previous
Vermögen
Next
Bibliotheken

CSS-Editor

9 views 0 Updated on July 24, 2024

Voraussetzungen

Ein Simplifier-Anwendung , die Sie formatieren möchten

UI5 und CSS: Bitte beachten Sie, dass Sie CSS-Direktiven hauptsächlich für Designzwecke und nicht für das grundlegende Layout verwenden, um die Reaktionsfähigkeit von UI5 zu erhalten.
Für Designzwecke empfehlen wir, 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

Im
Anwendungseditor, wählen Sie
CSS-Editor , indem Sie auf
Sonstiges (
Simplifier-Dokumentation):

Schritt 2 – Widgets nach Stilklasseneigenschaft formatieren

Sie können einem Widget über die Widget-Eigenschaft cssClasses CSS-Stilklassen 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 mit
HTML-Elementklassen:

  • Ü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