Geavanceerde CSS in Dash

Dashboards bouwen met Dash en Plotly

Alex Scriven

Data Scientist

CSS voor ruimte tussen objecten

Het 'Box Model' ziet elk HTML-element als een doos met lagen:

Inhoud van het object (eigenschappen height & width)
Padding (buiten de inhoud)
Border (tussen padding en margin)
Margin (buiten de border; scheidt elementen)

Een afbeelding van vier rechthoeken in elkaar van klein naar groot. De kleinste is content, dan padding, dan border en buitenste ring is margin.

Een border toevoegen

Het CSS-argument border heeft drie onderdelen:

'border':'A B C'
- A = dikte in pixels
- B = stijl (bijv. solid of dotted)
- C = kleur (bijv. red)

Een border in onze app

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

Een titel "Top Sales Categories" met daaronder, binnen een rode gestippelde rand, een horizontale staafgrafiek met kleine aankoopcategorieën op de y-as en totale bestellingen op de x-as. Daaronder, buiten de rand, staat een lijst met de twee topverkoopcategorieën.

CSS-afstand

De ruimte van een HTML-element instellen:

Geef vier getallen op per eigenschap (padding & margin)
- Met de klok mee: boven, rechts, onder, links
Of één getal (geldt voor alle zijden)
Of twee getallen voor boven-onder en links-rechts

Bijv. 'padding':'10px 5px 5px 15px'

Een afbeelding van de boxmodel-rechthoeken met op de padding-laag cijfers aan elke zijde. Met de klok mee vanaf boven: 10, 5, 5, 10

Padding toevoegen in Dash

Geen padding:

Dezelfde afbeelding als eerder om het randconcept te tonen. Een titel "Top Sales Categories" met daaronder, binnen een rode gestippelde rand, een horizontale staafgrafiek met kleine aankoopcategorieën op de y-as en totale bestellingen op de x-as. Daaronder, buiten de rand, staat een lijst met de twee topverkoopcategorieën.

Met 'padding':'100px':

Dezelfde afbeelding als links, maar de rand is aan alle kanten naar buiten gedrukt; pijlen geven dit aan. Er is meer ruimte rond de grafiek; de titel (binnen de rand) en de tekst eronder zijn weggeduwd.

Margin toevoegen in Dash

Geen margin:

Met margin: 100px auto:

Lijkt op de rechterafbeelding van de vorige slide, met pijlen die extra ruimte tonen. Deze ruimte zit echter buiten de rand. De titel en tekst eronder zijn weggeduwd, maar de ruimte tussen rand en grafiek blijft gelijk.

Centreren met auto-margin

Met: 'margin':'100px'

Met: 'margin':'100px auto'

Dezelfde afbeelding als eerder. De grafiek is centrisch uitgelijnd onder de titel en boven de tekst. Een titel "Top Sales Categories" met daaronder, binnen een rode gestippelde rand, een horizontale staafgrafiek met kleine aankoopcategorieën op de y-as en totale bestellingen op de x-as. Daaronder, buiten de rand, staat een lijst met de twee topverkoopcategorieën.

CSS voor layout

Elementen lijnen niet uit? HTML-elementen zijn 'inline' of 'block'.

Inline renderen op dezelfde regel
- Hebben geen height/width (of box-)eigenschappen
- Voorbeelden: <strong>, <a>, <img>
Block stapelen boven elkaar door een regeleinde
- Niet meerdere naast elkaar
- Voorbeelden: <h1>, <div>
Er is ook inline-block
- Je kunt height/width/box instellen
- Kunnen naast elkaar staan

Inline-block-elementen

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

Een afbeelding van drie kleine gekleurde vakken in een L-vorm. Een blauwe box staat bovenop een rode box, met rechts daarvan een groene box.

Laten we oefenen!

Dashboards bouwen met Dash en Plotly