CSS avanzato in Dash

Creare dashboard con Dash e Plotly

Alex Scriven

Data Scientist

CSS per lo spazio tra oggetti

Il "Box Model" considera ogni elemento HTML come una scatola a strati:

Contenuto dell'oggetto (proprietà height e width)
Padding (fuori dal contenuto)
Border (tra padding e margin)
Margin (fuori dal border, separa gli elementi)

Immagine con quattro rettangoli annidati dal più piccolo al più grande. Il più interno ha la parola content, poi padding, poi border e infine margin.

Aggiungere un bordo

L'argomento CSS border accetta tre elementi:

'border':'A B C'
- A = spessore in pixel
- B = stile (es. solid o dotted)
- C = colore (es. red)

Un bordo nella nostra app

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

Immagine con un titolo "Top Sales Categories"; sotto, dentro un bordo rosso tratteggiato, un grafico a barre orizzontali con categorie minori sull'asse y e ordini totali sull'asse x. Sotto, fuori dal bordo, un elenco con le prime due categorie di vendita.

Spaziatura CSS

Per impostare lo spazio di un elemento HTML:

Specifica quattro numeri per ciascuna proprietà (Padding e Margin)
- In senso orario: top, right, bottom, left
In alternativa: un numero (applicato a tutti i lati)
In alternativa: due numeri per alto-basso e sinistra-destra

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

Immagine del box model con lo strato di padding e numeri su ogni lato. In senso orario dall'alto: 10, 5, 5, 10.

Aggiungere padding in Dash

Nessun padding:

La stessa immagine usata prima per illustrare il concetto di bordo. Un titolo "Top Sales Categories"; sotto, dentro un bordo rosso tratteggiato, un grafico a barre orizzontali con categorie minori sull'asse y e ordini totali sull'asse x. Sotto, fuori dal bordo, un elenco con le prime due categorie di vendita.

Aggiungendo 'padding':'100px':

Stessa immagine a sinistra nella diapositiva precedente, ma il bordo è stato spinto verso l'esterno su tutti i lati, con frecce a indicarlo. C'è più spazio attorno al grafico; titolo e testo sotto sono allontanati.

Aggiungere margin in Dash

Nessun margin:

Aggiungendo margin: 100px auto:

Simile all'immagine di destra della diapositiva precedente: ci sono frecce a indicare spazio aggiuntivo, ma all'esterno del bordo. Titolo e testo sotto sono spinti fuori, lo spazio tra bordo e grafico resta uguale.

Centratura con margin auto

Con: 'margin':'100px'

La stessa immagine del concetto di bordo, ma con zoom ridotto: il grafico centrale è allineato a sinistra, non sotto il titolo e sopra il testo. Un titolo "Top Sales Categories"; sotto, dentro un bordo rosso tratteggiato, un grafico a barre orizzontali con categorie minori sull'asse y e ordini totali sull'asse x. Sotto, fuori dal bordo, un elenco con le prime due categorie di vendita.

Con: 'margin':'100px auto'

La stessa immagine del concetto di bordo. Il grafico è centrato sotto il titolo e sopra il testo. Un titolo "Top Sales Categories"; sotto, dentro un bordo rosso tratteggiato, un grafico a barre orizzontali con categorie minori sull'asse y e ordini totali sull'asse x. Sotto, fuori dal bordo, un elenco con le prime due categorie di vendita.

CSS per il layout

Elementi non allineati? Gli elementi HTML possono essere "inline" o "block".

Gli inline sono resi sulla stessa riga
- Non hanno proprietà di altezza/larghezza (o di box)
- Esempi: <strong>, <a>, <img>
I block si impilano perché includono un a capo
- Non puoi averne più di uno affiancato
- Esempi: <h1>, <div>
Esiste anche inline-block
- Puoi impostare height/width/proprietà box
- Possono stare affiancati

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

Immagine di tre piccoli riquadri colorati a forma di L. Un riquadro blu sopra un riquadro rosso, con un riquadro verde alla sua destra.

Esercitiamoci!

Creare dashboard con Dash e Plotly