SAPUI5 Grundlagen

Styling mit CSS

Standard-Klassen und eigenes CSS

(C) Brandeis Consulting.

CSS Layout im Box-Model

Zum Experimentieren ist diese Seite super:
https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel

Content

Der eigentliche Inhalt eines HTML-Elements. Die CSS-Eigenschaften width und height beziehen sich darauf.

Padding

Der unsichtbare Rand um den Content bis zum Border. In der Hintergrundfarbe background-color.

Border

Optional: Rand eines Oberflächenelements. Meistens invisible oder 1px breit.

Margin

Der unsichtbare Streifen um ein Oberflächenelement. Also der Abstandshalter vom Border bis zum Margin des nächsten Oberflächenelements.

(C) Brandeis Consulting.

Standard CSS-Klassen von SAPUI5

Wenn möglich verwenden wir Standard-SAPUI5 CSS-Klassen für die Formatierung.

Dazu gibt es auch noch 1- und 2-Seitige Varianten und Responsive Varianten. Die findet man in der Doku.

<Panel
    headerText="{i18n>helloPanelTitle}"
    class="sapUiResponsiveMargin"
    width="auto">

Die CSS-Klasse wird dem class-Attribut mitgegeben. Mehrere CSS-Klassen werden durch Space getrennt.

(C) Brandeis Consulting.

Eigene CSS-Klassen

Nur wenn es mit dem Standard nicht geht, werden eigene CSS-Klassen angelegt.

Wenn wir eigene CSS-Klassen nutzen, definieren wir zunächst eine Namensraum-CSS-Klasse. Diese geben wir unserer App mit, um Wechselwirkungen mit anderen Apps im Launchpad auszuschliessen. Im Tutorial ist das myAppDemoWT

<mvc:View
... >
    <Shell>
        <App class="myAppDemoWT">
            <pages>
               ...Sonstige Oberflächenelemente...
            </pages>
        </App>
    </Shell>
</mvc:View>
view/App.view.xml

Verwendung der konkreten, eigenen CSS-Klassen im Code:

<Button
    text="{i18n>showHelloButtonText}"
    press=".onShowHello"
    class="myCustomButton"/>

Definition der CSS-Klasse, eingeschränkt auf den Namensraum und mit Bezug auf die SAP Klassen:

.myAppDemoWT .myCustomButton .sapMBtnInner {
    font-size: 30px!important;
 }
(C) Brandeis Consulting.