CSS avansat în Dash

Crearea dashboardurilor cu Dash și Plotly

Alex Scriven

Data Scientist

CSS pentru spațierea între obiecte

„Modelul cutiei" tratează fiecare element HTML ca o cutie cu straturi:

Conținutul obiectului (proprietățile height și width)
Padding (în afara conținutului)
Border (între padding și margin)
Margin (în afara chenarului, separă elementele)

O imagine cu patru dreptunghiuri concentrice, de la cel mai mic la cel mai mare. Cel mai mic conține cuvântul „content", urmat de „padding", „border" și „margin".

Adăugarea unui chenar

Argumentul CSS border acceptă trei elemente:

'border':'A B C'
- A = grosime în pixeli
- B = stil (ex., solid sau dotted)
- C = culoare (ex., red)

Un chenar în aplicația noastră

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

O imagine cu titlul „Top Sales Categories"; sub acesta, înăuntrul unui chenar roșu punctat, se află un grafic cu bare orizontale cu categorii minore pe axa y și total comenzi pe axa x. Sub chenar, o listă cu primele două categorii de vânzări.

Spațiere CSS

Pentru a seta spațierea unui element HTML:

Specificați patru valori pentru fiecare proprietate (Padding și Margin)
- În sens orar: sus, dreapta, jos, stânga
Alternativ: o singură valoare (se aplică pe toate laturile)
Alternativ: două valori pentru sus-jos și stânga-dreapta

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

O imagine a dreptunghiurilor din modelul cutiei, cu stratul de padding având numere pe fiecare latură. În sens orar începând de sus, valorile sunt 10, 5, 5, 10.

Adăugarea padding-ului în Dash

Fără padding:

Aceeași imagine ca înainte, demonstrând conceptul de chenar. O imagine cu titlul „Top Sales Categories"; sub acesta, înăuntrul unui chenar roșu punctat, se află un grafic cu bare orizontale cu categorii minore pe axa y și total comenzi pe axa x. Sub chenar, o listă cu primele două categorii de vânzări.

Adăugând 'padding':'100px':

Aceeași imagine ca în stânga, însă chenarul a fost extins pe toate laturile, cu săgeți care indică această extindere. Există mai mult spațiu în jurul graficului, iar titlul și textul de jos au fost împinse mai departe.

Adăugarea margin-ului în Dash

Fără margin:

Adăugând margin: 100px auto:

Similar cu imaginea din dreapta slide-ului anterior, există săgeți care indică spațiu suplimentar. Totuși, acest spațiu este în afara chenarului. Titlul și textul de jos au fost împinse mai departe, dar spațiul dintre chenar și grafic rămâne același.

Centrare cu margin auto

Cu: 'margin':'100px'

Aceeași imagine ca înainte, demonstrând conceptul de chenar, însă zoom-ată în exterior; graficul central este aliniat la stânga, nefiind centrat sub titlu și deasupra textului de jos. O imagine cu titlul „Top Sales Categories"; sub acesta, înăuntrul unui chenar roșu punctat, se află un grafic cu bare orizontale cu categorii minore pe axa y și total comenzi pe axa x.

Cu: 'margin':'100px auto'

Aceeași imagine ca înainte, demonstrând conceptul de chenar. Graficul este centrat sub titlu și deasupra textului de jos. O imagine cu titlul „Top Sales Categories"; sub acesta, înăuntrul unui chenar roșu punctat, se află un grafic cu bare orizontale cu categorii minore pe axa y și total comenzi pe axa x.

CSS pentru layout

Elementele nu se aliniază? Elementele HTML pot fi „inline" sau „block".

Inline se redă pe același rând
- Nu au proprietăți de înălțime, lățime sau box
- Exemple: <strong>, <a>, <img>
Block se stivuiesc unul peste altul, incluzând un salt de linie
- Nu pot fi plasate mai multe unul lângă altul
- Exemple: <h1>, <div>
Există și inline-block
- Permite setarea proprietăților height/width/box
- Poate fi plasat alăturat

Elemente inline-block

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

O imagine cu trei căsuțe colorate mici în formă de L. O căsuță albastră este stivuită deasupra uneia roșii, care are o căsuță verde în dreapta sa.

Să exersăm!

Crearea dashboardurilor cu Dash și Plotly