Fortgeschrittenes CSS in Dash

Dashboards mit Dash und Plotly erstellen

Alex Scriven

Data Scientist

CSS für Abstände zwischen Objekten

Das „Box Model" betrachtet jedes HTML-Element als Box mit Schichten:

Inhalt des Objekts (Eigenschaften height & width)
Padding (außerhalb des Inhalts)
Border (zwischen Padding und Margin)
Margin (außerhalb der Border, trennt Elemente)

Ein Bild von vier ineinander liegenden Rechtecken, vom kleinsten zum größten. Das kleinste heißt content, der nächste Ring ist padding, dann border und außen margin.

Eine Border hinzufügen

Das CSS-Argument border hat drei Teile:

'border':'A B C'
- A = Dicke in Pixeln
- B = Stil (z. B. solid oder dotted)
- C = Farbe (z. B. red)

Eine Border in unserer App

dcc.Graph(figure=ecom_bar, 
 style={'width':'500px', 
        'height':'450px',
        'border':'5px dotted red'}
         )

Ein Bild mit dem Titel „Top Sales Categories". Darunter, innerhalb einer roten gepunkteten Border, ist ein horizontales Balkendiagramm mit kleineren Kaufkategorien auf der y‑Achse und Bestellungen auf der x‑Achse. Außerhalb der Border steht eine Liste mit den Top‑2-Kategorien.

CSS-Abstände

So legst du den Abstand eines HTML-Elements fest:

Vier Werte pro Eigenschaft (Padding & Margin)
- Im Uhrzeigersinn: oben, rechts, unten, links
Alternativ: ein Wert (gilt für alle Seiten)
Alternativ: zwei Werte für oben–unten und links–rechts

Z. B. 'padding':'10px 5px 5px 15px'

Ein Bild des Box-Models, wobei auf der Padding-Schicht Zahlen an jeder Seite stehen. Im Uhrzeigersinn ab oben: 10, 5, 5, 10.

Padding in Dash hinzufügen

Kein Padding:

Dasselbe Bild wie zuvor zur Border. Ein Bild mit dem Titel „Top Sales Categories". Darunter, innerhalb einer roten gepunkteten Border, ist ein horizontales Balkendiagramm mit kleineren Kaufkategorien auf der y‑Achse und Bestellungen auf der x‑Achse. Außerhalb der Border steht eine Liste mit den Top‑2-Kategorien.

Mit 'padding':'100px':

Dasselbe Bild wie links auf der vorherigen Folie, jedoch wurde die Border auf allen Seiten nach außen verschoben (Pfeile zeigen dies an). Mehr Platz um das Diagramm; Titel und Text wurden weggedrückt.

Margin in Dash hinzufügen

Kein Margin:

Mit margin: 100px auto:

Ähnlich wie das rechte Bild der vorherigen Folie zeigen Pfeile zusätzlichen Platz – jedoch außerhalb der Border. Titel und Text wurden nach außen verschoben, der Abstand zwischen Border und Diagramm bleibt gleich.

Zentrieren mit Auto-Margin

Mit: 'margin':'100px'

Mit: 'margin':'100px auto'

Dasselbe Bild wie zuvor zur Border. Das Diagramm ist mittig unter dem Titel und über dem Text ausgerichtet. Ein Bild mit dem Titel „Top Sales Categories". Darunter, innerhalb einer roten gepunkteten Border, ist ein horizontales Balkendiagramm mit kleineren Kaufkategorien auf der y‑Achse und Bestellungen auf der x‑Achse. Unten, außerhalb der Border, eine Liste der Top‑2-Kategorien.

CSS für Layout

Elemente richten sich nicht aus? HTML-Elemente sind entweder „inline" oder „block".

Inline erscheinen in derselben Zeile
- Haben keine Höhe-/Breite- (bzw. Box-)Eigenschaften
- Beispiele: <strong>, <a>, <img>
Block stapeln sich, da sie einen Zeilenumbruch enthalten
- Nicht mehrere nebeneinander möglich
- Beispiele: <h1>, <div>
Es gibt auch inline-block
- Höhe/Breite/Box-Eigenschaften möglich
- Können nebeneinander stehen

Inline-Block-Elemente

<div style='width:50px;height:50px;
     background-color:blue'></div>
<div style='width:50px;height:50px;
     background-color:red
     ;display:inline-block'></div>
<div style='width:50px;height:50px;
     background-color:green;
     display:inline-block'></div>

Ein Bild von drei kleinen farbigen Kästchen in L-Form. Ein blaues Kästchen steht über einem roten, rechts daneben ein grünes.

Lass uns üben!

Dashboards mit Dash und Plotly erstellen