04 Dash - Bootstrap

Introduction

Bootstrap est un framework CSS populaire qui permet de créer des interfaces web réactives et esthétiquement agréables. En combinant Bootstrap avec Dash, vous pouvez non seulement améliorer l'aspect visuel de vos tableaux de bord, mais aussi profiter de la réactivité et de la variété des composants prêts à l'emploi de Bootstrap. Ce cours vous guidera à travers les étapes d'installation et de configuration de Bootstrap pour Dash, et vous apprendrez à utiliser ses divers composants pour créer des interfaces utilisateurs attrayantes et fonctionnelles.

Objectifs

À la fin de cette quête, vous serez capable de :

✅ Intégrer Bootstrap dans Dash ✅ Utiliser les composants Bootstrap ✅ Créer des layouts réactifs ✅ Personnaliser l'apparence avec Bootstrap ✅ Améliorer l'interactivité et l'esthétique ✅ Mettre en pratique

Sommaire

Qu'est-ce que Bootstrap ?

• Bootstrap est un framework CSS populaire pour le développement de sites web et d'applications web réactives.
• Il fournit une collection de feuilles de style et de composants pour faciliter la conception et la mise en page.

Pourquoi utiliser Bootstrap avec Dash ?

• Pour améliorer l'esthétique et la réactivité des applications Dash.
• Pour accéder à une large gamme de composants prêts à l'emploi.

Installation et configuration de base

A. Installation des dépendances

• Installer Dash Bootstrap Components :

pip install dash-bootstrap-components

• Importer dans votre application Dash :

import dash_bootstrap_components as dbc

B. Configuration de l'application Dash avec Bootstrap

Choisir un thème Bootstrap et l'appliquer à votre application :

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

Exemple d'utilisation de Bootstrap

Voici un exemple d'utilisation de Bootstrap pour créer un tableau de bord simple :

from dash import Dash, html, dcc
import pandas as pd
import plotly.express as px
import dash_bootstrap_components as dbc

# Création de l'application Dash
app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])


# Créez la mise en page
app.layout = dbc.Container([
    dbc.Row([
        dbc.Col(html.H1('Mon tableau de bord'), width=12),
    ]),
    dbc.Row([
        dbc.Col(dbc.Card(html.H2('Carte 1'), color='primary'), width=6),
        dbc.Col(dbc.Card(html.H2('Carte 2'), color='secondary'), width=6),
    ]),
    dbc.Row([
        dbc.Col(dbc.Button('Bouton 1'), width=6),
        dbc.Col(dbc.Button('Bouton 2'), width=6),
    ]),
])

# Lancez l'application
if __name__ == '__main__':
    app.run_server(debug=True)

Ce code créera un tableau de bord avec une mise en page simple. Le tableau de bord comprendra deux cartes, deux boutons et un titre. Les cartes et les boutons utilisent des classes CSS Bootstrap pour définir leur apparence.

Aperçu des composants Bootstrap dans Dash

1. Boutons (Buttons)

Utilisation : Boutons pour des actions ou des liens.

Exemple :

dbc.Button("Cliquez-moi", color="primary", className="mr-1")

Les paramètres color, className, width, etc ... sont optionnels mais permettent de personnaliser les composants

2. Cartes (Cards)

Utilisation : Conteneurs de contenu avec plusieurs options de personnalisation.

Exemple :

dbc.Card([
    dbc.CardHeader("En-tête de Carte"),
    dbc.CardBody([
        html.H5("Titre de la Carte", className="card-title"),
        html.P("Texte de la carte...", className="card-text"),
    ]),
    dbc.CardFooter("Pied de Carte")
])

3. Navbar

Utilisation : Barre de navigation pour l'application.

Exemple :

dbc.NavbarSimple(
    children=[
        dbc.NavItem(dbc.NavLink("Page 1", href="#")),
        dbc.DropdownMenu(
            children=[
                dbc.DropdownMenuItem("Plus de liens", header=True),
                dbc.DropdownMenuItem("Page 2", href="#"),
            ],
            nav=True,
            in_navbar=True,
            label="Menu déroulant",
        ),
    ],
    brand="Nom de l'Application",
    brand_href="#",
    color="primary",
    dark=True,
)

Précisions :

• dbc.NavbarSimple : C'est le composant principal qui crée la barre de navigation.

• children : Cette propriété contient une liste des éléments qui seront inclus dans la navbar. Ces éléments peuvent être des liens, des menus déroulants, des formulaires, etc.

• brand : Le texte ou l'élément qui sert de "marque" pour votre application. Généralement, c'est le nom de votre application ou votre logo.

• brand_href : L'URL vers laquelle l'utilisateur est redirigé lorsqu'il clique sur la marque.

• color : Définit la couleur de fond de la navbar. Les valeurs communes incluent "primary", "secondary", "success", "warning", etc., conformément aux couleurs de Bootstrap.

• dark : Un booléen qui, lorsqu'il est défini sur True, indique que votre navbar a un fond sombre et que les textes doivent être clairs.

Éléments dans children :

• dbc.NavItem(dbc.NavLink("Page 1", href="#")) : Cela crée un élément de navigation (NavItem) contenant un lien (NavLink). "Page 1" est le texte du lien, et href="#" signifie que le lien ne mène nulle part pour le moment (c'est un placeholder).

• dbc.DropdownMenu : Cela crée un menu déroulant dans la navbar.

• children : Contient les éléments du menu déroulant.

• dbc.DropdownMenuItem("Plus de liens", header=True) : C'est un en-tête dans le menu déroulant.

• dbc.DropdownMenuItem("Page 2", href="#") : Un autre élément de menu, similaire au NavItem ci-dessus.

• nav : Lorsqu'il est défini sur True, cela indique que le menu déroulant doit être stylisé comme un élément de navigation.

• in_navbar : Lorsqu'il est défini sur True, cela place le menu déroulant à l'intérieur de la navbar.

• label : Le texte qui apparaît dans la navbar pour le menu déroulant.

Pour personnaliser ce composant, vous pouvez modifier les propriétés mentionnées ci-dessus. Par exemple, vous pouvez changer la couleur, ajouter plus de liens ou de menus déroulants, ou modifier le style de la navbar en ajoutant des classes CSS personnalisées. Vous pouvez également intégrer d'autres types de composants Dash ou HTML si nécessaire pour répondre à vos besoins de conception spécifiques.

4. Grille (Grid System)

Utilisation : Mise en page et alignement du contenu.

Exemple :

dbc.Container([
    dbc.Row([
        dbc.Col(html.Div("Colonne 1"), width=6),
        dbc.Col(html.Div("Colonne 2"), width=6)
    ])
])

5. Alertes (Alerts)

Utilisation : Afficher des messages importants.

Exemple :

dbc.Alert("Ceci est une alerte importante!", color="warning")

6. Progress Bars

Utilisation : Indiquer le progrès d'une tâche.

Exemple :

dbc.Progress(value=75)

7. Onglets (Tabs)

Utilisation : Navigation entre différentes vues.

Exemple :

dbc.Tabs([
    dbc.Tab(html.Div("Contenu de l'onglet 1"), label="Onglet 1"),
    dbc.Tab(html.Div("Contenu de l'onglet 2"), label="Onglet 2"),
])

8. Tooltips

Utilisation : Afficher des informations supplémentaires au survol.

Exemple :

import dash
from dash import html
import dash_bootstrap_components as dbc

# Créer l'application avec un thème Bootstrap
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

# Définition du layout de l'application
app.layout = html.Div([
    # Bouton cible pour l'infobulle
    dbc.Button("Passez la souris ici", id="tooltip-target", className="mr-1"),

    # Infobulle attachée au bouton
    dbc.Tooltip(
        "Informations supplémentaires",
        target="tooltip-target"
    ),
])

# Exécuter l'application
if __name__ == '__main__':
    app.run_server(debug=True)

Précisions :

• Un bouton est créé avec un identifiant (id) "tooltip-target".
• Une infobulle dbc.Tooltip est ajoutée. Le target de l'infobulle est défini sur "tooltip-target", ce qui signifie que l'infobulle sera associée au bouton.
• Lorsque vous passez la souris sur le bouton, l'infobulle apparaîtra affichant le texte "Informations supplémentaires".

9. Modals

Utilisation : Afficher du contenu dans une fenêtre superposée.

Exemple :

import dash
from dash import html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output, State

# Créer l'application avec un thème Bootstrap
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

# Définition du layout de l'application
app.layout = html.Div([
    # Bouton pour ouvrir le modal
    dbc.Button("Ouvrir le Modal", id="open-modal", n_clicks=0),

    # Modal
    dbc.Modal([
        dbc.ModalHeader("En-tête du Modal"),
        dbc.ModalBody("Corps du Modal"),
        dbc.ModalFooter(
            dbc.Button("Fermer", id="close-modal", className="ml-auto")
        ),
    ], id="modal", is_open=False),
])

# Callback pour ouvrir le modal
@app.callback(
    Output("modal", "is_open"),
    [Input("open-modal", "n_clicks"), Input("close-modal", "n_clicks")],
    [State("modal", "is_open")]
)
def toggle_modal(n1, n2, is_open):
    if n1 or n2:
        return not is_open
    return is_open

# Exécuter l'application
if __name__ == '__main__':
    app.run_server(debug=True)

Précisions :

• dbc.Button("Ouvrir le Modal", id="open-modal", n_clicks=0) : Un bouton pour ouvrir le modal. id est utilisé pour identifier le bouton dans le callback, et n_clicks suit le nombre de fois que le bouton a été cliqué.
• dbc.Modal([...]) : Définit le modal avec un en-tête (ModalHeader), un corps (ModalBody) et un pied de page (ModalFooter).
• id="modal" : Identifiant du modal pour le callback.
• is_open=False : Indique que le modal est initialement fermé.
• @app.callback : Décorateur pour créer un callback qui réagit aux interactions de l'utilisateur.
• Output("modal", "is_open") : Définit que le callback affectera la propriété is_open du modal.
• Input("open-modal", "n_clicks"), Input("close-modal", "n_clicks") : Définit que le callback est déclenché par les clics sur les boutons pour ouvrir et fermer le modal.
• State("modal", "is_open") : Permet au callback de lire l'état actuel du modal (ouvert ou fermé) sans le modifier.
• def toggle_modal(n_open, n_close, is_open) : La fonction appelée par le callback. Elle inverse l'état d'ouverture du modal en fonction des clics sur les boutons.

Ressources :

Challenge

Votre défi est de moderniser et d'améliorer l'interface utilisateur de l'application Dash que vous avez développée dans la quête précédente (Quête 3).

Vous allez transformer cette application en utilisant exclusivement Dash Bootstrap Components (DBC) pour le style et la mise en page, afin de bénéficier des avantages de Bootstrap dans votre développement.

Solution proposée

Dans ce fichier vous allez trouver une solution possible au challenge.