Avancerad CSS i Dash

Bygg dashboards med Dash och Plotly

Alex Scriven

Data Scientist

CSS för avstånd mellan objekt

"Box model" behandlar varje HTML-element som en box med lager:

Elementets innehåll (egenskaperna height & width)
Padding (utanför innehållet)
Border (mellan padding och margin)
Margin (utanför border, separerar element från varandra)

En bild av fyra rektanglar inuti varandra, från minsta till största. Den innersta innehåller ordet content, nästa ring är padding, därefter border och den yttersta är margin.

Lägga till en border

CSS-argumentet border tar tre element:

'border':'A B C'
- A = tjocklek i pixlar
- B = stil (t.ex. solid eller dotted)
- C = färg (t.ex. red)

En border i vår app

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

En bild med titeln "Top Sales Categories". Under titeln, inuti en röd prickad border, visas ett horisontellt stapeldiagram med mindre inköpskategorier på y-axeln och totala beställningar på x-axeln. Under diagrammet, utanför bordern, finns en lista med de två bästa försäljningskategorierna.

CSS-avstånd

Så här anger du avstånd för ett HTML-element:

Ange fyra värden för varje egenskap (Padding & Margin)
- Medurs: topp, höger, botten, vänster
Alternativt: ett värde (gäller alla sidor)
Alternativt: två värden för topp-botten respektive vänster-höger

T.ex. 'padding':'10px 5px 5px 15px'

En bild av box-modellens rektanglar med paddinglagret markerat med siffror på varje sida. Medurs från toppen är siffrorna 10, 5, 5, 10.

Lägga till padding i Dash

Utan padding:

Samma bild som tidigare för att illustrera border-konceptet. Titeln "Top Sales Categories" syns, och under den, inuti en röd prickad border, visas ett horisontellt stapeldiagram med mindre inköpskategorier på y-axeln och totala beställningar på x-axeln. Under diagrammet, utanför bordern, finns en lista med de två bästa försäljningskategorierna.

Med 'padding':'100px':

Samma bild som till vänster, men bordern har förskjutits utåt på alla sidor med pilar som visar förskjutningen. Det finns mer utrymme runt diagrammet, och titeln inuti bordern samt texten nedanför har förflyttats bort.

Lägga till margin i Dash

Utan margin:

Med margin: 100px auto:

Liknar den högra bilden på föregående slide – pilar visar extra utrymme, men nu utanför bordern. Titeln och texten nedanför har förflyttats, medan avståndet mellan bordern och diagrammet är oförändrat.

Centrera med auto-margin

Med: 'margin':'100px'

Samma bild som tidigare för border-konceptet, men inzoomad. Diagrammet är vänsterjusterat och hamnar inte under titeln eller ovanför texten nedanför. Titeln "Top Sales Categories" syns, och under den, inuti en röd prickad border, visas ett horisontellt stapeldiagram med mindre inköpskategorier på y-axeln och totala beställningar på x-axeln.

Med: 'margin':'100px auto'

Samma bild som tidigare för border-konceptet. Diagrammet är centrerat under titeln och ovanför texten nedanför. Titeln "Top Sales Categories" syns, och under den, inuti en röd prickad border, visas ett horisontellt stapeldiagram med mindre inköpskategorier på y-axeln och totala beställningar på x-axeln.

CSS för layout

Element som inte radar upp sig? HTML-element är antingen 'inline'- eller 'block'-element.

Inline renderas på samma rad
- Har inga egenskaper för höjd, bredd eller box
- Exempel: <strong>, <a>, <img>
Block staplas ovanpå varandra med radbrytning
- Kan inte placeras bredvid varandra
- Exempel: <h1>, <div>
Det finns också inline-block
- Kan ha egenskaper för höjd, bredd och box
- Kan placeras bredvid varandra

Inline-block-element

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

En bild av tre små färgade rutor i en L-form. En blå ruta är stapelrad ovanpå en röd ruta, och till höger om den röda finns en grön ruta.

Nu kör vi en övning!

Bygg dashboards med Dash och Plotly