Mise en page et organisation

Streamlit fournit plusieurs outils de mise en page : sidebar, colonnes, conteneurs, expanders et applications multi-pages.

Sidebar

La sidebar accueille les filtres globaux du dashboard. Elle reste visible quelle que soit la section affichée.

with st.sidebar:
    st.header("Filtres")
    st.divider()

    regions = ["Toutes"] + repo.get_regions()
    region = st.selectbox("Région", options=regions)

    annee = st.slider("Année", min_value=2020, max_value=2024, value=2024)

Les valeurs retournées (region, annee) sont utilisables dans le reste du script exactement comme si les widgets étaient dans le corps principal. La seule différence est leur positionnement visuel dans la sidebar.

Colonnes et conteneurs

st.columns()

st.columns() divise horizontalement l'espace disponible. On passe soit un entier (colonnes égales), soit une liste de ratios :

# 3 colonnes égales
col1, col2, col3 = st.columns(3)

# Colonne large + deux étroites
col_main, col_right1, col_right2 = st.columns([3, 1, 1])

Chaque colonne est un contexte dans lequel on place des composants avec le mot-clé with :

col1, col2 = st.columns(2)

with col1:
    st.subheader("Tableau des ventes")
    st.dataframe(df_ventes)

with col2:
    st.subheader("Graphique")
    st.bar_chart(df_regions)

st.container()

st.container() regroupe des éléments sans effet visuel. Utile pour écrire dans une zone définie plus tôt dans le script :

placeholder = st.container()

# ... plus loin dans le script ...
with placeholder:
    st.write("Ce contenu apparaît à la position du container")

st.expander()

st.expander(label) crée une section repliable, masquée par défaut. L'utilisateur clique pour la déployer. Utile pour les détails techniques ou les données brutes :

with st.expander("Voir les données brutes"):
    st.dataframe(df_raw)

st.divider()

st.divider() insère une ligne de séparation horizontale entre les sections.

Applications multi-pages

Streamlit supporte les applications multi-pages depuis la version 1.10 :

app.py           # page d'accueil (obligatoire)
pages/
├── 1_Ventes.py
├── 2_Clients.py
└── 3_Export.py

Les fichiers dans le dossier pages/ apparaissent automatiquement dans la sidebar comme liens de navigation. Le préfixe numérique détermine l'ordre d'affichage. Les underscores dans le nom de fichier deviennent des espaces dans le menu : 1_Ventes.py apparaît comme « 1 Ventes ».

Chaque fichier de page est un script Streamlit autonome : il peut importer le repository, définir ses propres widgets, utiliser le cache, etc.

Configuration de l'application

Fichier .streamlit/config.toml

Le fichier .streamlit/config.toml à la racine du projet permet de personnaliser l'apparence et le comportement de l'application :

[theme]
primaryColor = "#1f77b4"
backgroundColor = "#ffffff"
secondaryBackgroundColor = "#f0f2f6"
textColor = "#262730"

[server]
port = 8501

st.set_page_config()

st.set_page_config() définit le titre de l'onglet, l'icône et le layout.

import streamlit as st

# Premier appel obligatoire
st.set_page_config(
    page_title="Dashboard Ventes",
    page_icon="📊",
    layout="wide"          # "centered" (défaut) ou "wide"
)

# Tout le reste ensuite
st.title("Dashboard Ventes")

Le paramètre layout accepte deux valeurs :

layout="wide" est le choix habituel pour un dashboard : toute la largeur de la fenêtre est utilisée.

À retenir