CSS avancé dans Dash

Créer des tableaux de bord avec Dash et Plotly

Alex Scriven

Data Scientist

CSS pour l'espacement entre objets

Le « modèle de boîte » considère chaque élément HTML comme une boîte en couches :

Contenu de l'objet (propriétés height et width)
Padding (autour du contenu)
Bordure (entre le padding et la marge)
Marge (à l'extérieur de la bordure, espace entre éléments)

Une image de quatre rectangles imbriqués du plus petit au plus grand. Le plus petit porte « content », l'anneau suivant « padding », puis « border », et enfin « margin ».

Ajouter une bordure

L'argument CSS border prend trois éléments :

'border':'A B C'
- A = épaisseur en pixels
- B = style (p. ex. solid ou dotted)
- C = couleur (p. ex. red)

Une bordure dans notre app

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

Une image avec un titre « Top Sales Categories ». En dessous, dans une bordure rouge en pointillés, un histogramme horizontal avec des catégories d'achats mineures en ordonnée et les commandes totales en abscisse. En dessous, hors de la bordure, une liste des deux meilleures catégories de ventes.

Espacements en CSS

Pour définir l'espacement d'un élément HTML :

Indiquez quatre valeurs par propriété (Padding et Margin)
- Dans le sens horaire : haut, droite, bas, gauche
Ou : une seule valeur (appliquée partout)
Ou : deux valeurs pour haut-bas et gauche-droite

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

Une image des rectangles du modèle de boîte avec des nombres sur chaque côté de la zone de padding. Au milieu de chaque côté : en partant du haut dans le sens horaire, 10, 5, 5, 10.

Ajouter du padding dans Dash

Sans padding :

La même image qu'auparavant illustrant la bordure. Un titre « Top Sales Categories », en dessous et à l'intérieur d'une bordure rouge en pointillés, un histogramme horizontal avec des catégories d'achats mineures en ordonnée et les commandes totales en abscisse. En dessous, hors de la bordure, une liste des deux meilleures catégories.

Ajout de 'padding':'100px' :

La même image qu'à droite sur la diapo précédente, mais la bordure est repoussée sur tous les côtés, avec des flèches le montrant. Il y a plus d'espace autour du graphique et du titre à l'intérieur de la bordure ; le texte en dessous est éloigné.

Ajouter une marge dans Dash

Sans marge :

Ajout de margin: 100px auto :

Semblable à l'image de droite de la diapo précédente, avec des flèches indiquant un espace supplémentaire. Cet espace est à l'extérieur de la bordure. Le titre et le texte dessous sont repoussés, mais l'espace entre bordure et graphique est inchangé.

Centrer avec une marge auto

Avec : 'margin':'100px'

La même image illustrant la bordure, mais dézoommée, et le graphique central est aligné à gauche ; il n'est pas sous le titre ni au-dessus du texte. Un titre « Top Sales Categories », en dessous une bordure rouge en pointillés contenant un histogramme horizontal, et en dessous, hors de la bordure, une liste des deux meilleures catégories.

Avec : 'margin':'100px auto'

La même image qu'auparavant illustrant la bordure. Le graphique est centré sous le titre et au-dessus du texte. Un titre « Top Sales Categories », une bordure rouge en pointillés contenant un histogramme horizontal, et en dessous, hors de la bordure, une liste des deux meilleures catégories.

CSS pour la mise en page

Des éléments ne s'alignent pas ? Les éléments HTML sont soit « inline », soit « block ».

Inline s'affichent sur la même ligne
- Pas de propriétés de hauteur/largeur (ni de boîte)
- Exemples : <strong>, <a>, <img>
Block se superposent verticalement car ils incluent un saut de ligne
- Impossible d'en avoir plusieurs côte à côte
- Exemples : <h1>, <div>
Il existe aussi inline-block
- Hauteur/largeur/boîte configurables
- Peut être côte à côte

Éléments 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>

Une image de trois petits carrés colorés en forme de L : un carré bleu au-dessus d'un rouge, avec un carré vert à droite du rouge.

Passons à la pratique !

Créer des tableaux de bord avec Dash et Plotly