SAPUI5 Grundlagen

Styling mit CSS

Standard-Klassen und eigenes CSS

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.

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.

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;
 }