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 » voit chaque élément HTML comme une boîte à couches :

Contenu de l'objet (propriétés height et width)
Remplissage (padding) — à l'extérieur du contenu
Bordure — entre le remplissage et la marge
Marge — à l'extérieur de la bordure, sépare les éléments

Une image de quatre rectangles emboîtés du plus petit au plus grand. Le plus petit porte « content », puis « padding », puis « border », et le dernier « 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 appli

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

Une image avec le titre « Top Sales Categories ». En dessous, dans une bordure rouge en pointillés, un diagramme à bandes horizontal avec des catégories mineures sur l'axe y et les commandes totales sur l'axe x. Plus bas, hors bordure, une liste des deux meilleures catégories.

Espacement en CSS

Pour régler l'espacement d'un élément HTML :

Indiquez quatre valeurs pour chaque propriété (padding et margin)
- Sens horaire : haut, droite, bas, gauche
Ou : une valeur (appliquée à tous les côtés)
Ou : deux valeurs pour haut-bas et gauche-droite

P. ex., 'padding':'10px 5px 5px 15px'

Une image du modèle de boîte où la couche de padding affiche un nombre au milieu de chaque côté. Dans le sens horaire à partir du haut : 10, 5, 5, 10.

Ajouter du padding dans Dash

Aucun padding :

La même image qu'avant pour illustrer la bordure. Une image avec le titre « Top Sales Categories ». En dessous, dans une bordure rouge en pointillés, un diagramme à bandes horizontal avec des catégories mineures sur l'axe y et les commandes totales sur l'axe x. Plus bas, hors bordure, une liste des deux meilleures catégories.

Ajout de 'padding':'100px' :

La même image qu'à gauche, mais la bordure est repoussée de tous les côtés, avec des flèches vers l'arrière pour l'indiquer. Il y a plus d'espace autour du graphique et du titre à l'intérieur de la bordure, et le texte dessous est éloigné.

Ajouter une marge dans Dash

Aucune marge :

Ajout de margin: 100px auto :

Semblable à l'image de droite de la diapo précédente, des flèches indiquent plus d'espace, mais à l'extérieur de la bordure. Le titre et le texte du bas sont repoussés, mais l'espace entre la bordure et le graphique est inchangé.

Centrer avec une marge auto

Avec : 'margin':'100px'

Avec : 'margin':'100px auto'

La même image qu'avant pour illustrer la bordure. Le graphique est centré sous le titre et au-dessus du texte. Une image avec le titre « Top Sales Categories ». En dessous, dans une bordure rouge en pointillés, un diagramme à bandes horizontal avec des catégories mineures sur l'axe y et les commandes totales sur l'axe x. Plus bas, hors bordure, une liste des deux meilleures catégories.

CSS pour la mise en page

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

Inline : rendus sur la même ligne
- Pas de propriétés de hauteur/largeur (ni de boîte)
- Exemples : <strong>, <a>, <img>
Block : empilés, avec 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
- Peuvent ê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 est empilé au-dessus d'un rouge, qui a un vert à sa droite.

Passons à la pratique !

Créer des tableaux de bord avec Dash et Plotly