Au-delà des bases : Guide complet des boutons Streamlit
- Name
- Olaf Källström
Published on
Streamlit a révolutionné la façon dont nous construisons des applications de données. Avec son approche de développement simplifié, il a permis aux scientifiques des données et aux développeurs de créer facilement des applications interactives et conviviales. L'un des éléments clés de Streamlit qui contribue à cette interactivité est le modeste bouton. Dans ce guide, nous plongerons profondément dans le monde des boutons st.button de Streamlit, en explorant leurs utilisations, leurs options de stylisation et leurs capacités événementielles. Nous fournirons également des exemples pratiques pour les débutants et les développeurs expérimentés.
Avez-vous entendu parler de cet outil incroyable d'analyse de données et de visualisation de données, qui transforme votre application Streamlit en Tableau ?
PyGWalker (opens in a new tab) est une bibliothèque Python qui vous aide à intégrer facilement une interface utilisateur semblable à Tableau dans votre propre application Streamlit, sans effort. Découvrez cette vidéo incroyable réalisée par Sven de Coding is Fun (opens in a new tab) qui démontre les étapes détaillées pour améliorer votre application Streamlit avec cette puissante bibliothèque Python de visualisation de données !
Un grand merci à Sven et à sa grande contribution (opens in a new tab) à la communauté PyGWalker !
De plus, vous pouvez également consulter la page GitHub de PyGWalker (opens in a new tab) pour plus d'exemples de PyGWalker.
Comprendre st.button dans Streamlit
Qu'est-ce que st.button dans Streamlit ?
Dans Streamlit, st.button est une fonction qui crée un widget de bouton. C'est un outil simple mais puissant qui vous permet d'ajouter de l'interactivité à vos applications Streamlit. Lorsqu'un utilisateur clique sur un bouton, cela déclenche un événement qui peut être utilisé pour effectuer une action spécifique ou mettre à jour l'état de l'application.
if st.button('Dire bonjour'):
st.write('Bonjour, Streamlit !')Dans l'exemple ci-dessus, lorsque le bouton 'Dire bonjour' est cliqué, le texte 'Bonjour, Streamlit !' est affiché à l'écran.
Comment utiliser st.button dans Streamlit
Utiliser st.button dans Streamlit est simple. La fonction prend un argument requis - l'étiquette du bouton, qui est une chaîne de caractères. Elle accepte également plusieurs arguments optionnels qui vous permettent de personnaliser le comportement et l'apparence du bouton. Regardons certains de ces arguments :
key: un identifiant unique pour le bouton. Cela est utile lorsque vous avez plusieurs boutons et que vous souhaitez les distinguer les uns des autres.help: une chaîne de caractères qui sera affichée sous forme de tooltip lorsque l'utilisateur survole le bouton.
if st.button('Cliquez-moi', key='mon_bouton', help='Cliquez sur ce bouton pour effectuer une action'):
st.write('Vous avez cliqué sur le bouton !')Explorer les arguments et les options de stylisation pour le bouton Streamlit
La fonction st.button de Streamlit offre un certain nombre d'arguments qui vous permettent de personnaliser l'apparence et le comportement de vos boutons. Cependant, au moment de la rédaction de cet article, Streamlit ne prend pas en charge nativement la modification de la couleur et de la taille d'un bouton directement par le biais de la fonction st.button.
Styliser les boutons Streamlit avec CSS
Bien que Streamlit ne propose pas d'options intégrées pour la stylisation des boutons, vous pouvez utiliser CSS pour personnaliser vos boutons. Vous pouvez injecter du CSS personnalisé dans votre application Streamlit en utilisant la fonction st.markdown avec l'argument unsafe_allow_html=True. Voici un exemple :
st.markdown("""
<style>
.custom-button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
.custom-button:hover {
opacity: 0.8;
}
</style>
<button class="custom-button">Bouton personnalisé</button>
""", unsafe_allow_html=True)Dans cet exemple, nous avons créé un bouton personnalisé avec un fond vert, un texte blanc et un peu de rembourrage. Nous avons également ajouté un effet de survol qui réduit l'opacité du bouton lorsque la souris est dessus.
L'événement on_clickButton dans Streamlit
Dans Streamlit, l'événement on_click est déclenché lorsqu'un bouton est cliqué. Cet événement peut être utilisé pour effectuer une action spécifique ou mettre à jour l'état de l'application. Par exemple, vous pourriez utiliser l'événement on_click pour rafraîchir les données, afficher ou masquer du contenu, ou effectuer un calcul.
Voici un exemple de l'utilisation de l'événement on_click dans Streamlit :
def dire_bonjour():
st.write('Bonjour, Streamlit !')
bouton = st.button('Dire bonjour')
bouton.on_click(dire_bonjour)Dans cet exemple, lorsque le bouton 'Dire bonjour' est cliqué, la fonction dire_bonjour est appelée, ce qui écrit 'Bonjour, Streamlit !' à l'écran.
Exemples pratiques de boutons Streamlit
Le bouton st.button de Streamlit n'est pas seulement un concept théorique, c'est un outil pratique que vous pouvez utiliser pour ajouter de l'interactivité à vos applications. Regardons quelques exemples qui illustrent comment l'utiliser efficacement.
Exemples de boutons Streamlit pour les débutants
Si vous êtes nouveau dans Streamlit, voici un exemple simple pour vous mettre sur la voie. Ce code crée un bouton qui, lorsqu'il est cliqué, affiche un message :
if st.button('Cliquez-moi'):
st.write('Vous avez cliqué sur le bouton !')Dans cet exemple, st.button('Cliquez-moi') crée un bouton avec l'étiquette 'Cliquez-moi'. Lorsque ce bouton est cliqué, st.write('Vous avez cliqué sur le bouton !') est exécuté, et le message 'Vous avez cliqué sur le bouton !' est affiché à l'écran.
Utilisation avancée des boutons Streamlit
Pour les utilisateurs plus avancés, vous pouvez utiliser des boutons pour contrôler le flux de votre application. Par exemple, vous pouvez créer un bouton qui charge des données lorsqu'il est cliqué:
if st.button('Charger les données'):
data = load_data()
st.write(data)Dans cet exemple, en cliquant sur le bouton "Charger les données", la fonction load_data est appelée et les données renvoyées sont affichées à l'écran.
Conclusion
La fonction st.button de Streamlit est un outil puissant pour créer des applications interactives et conviviales. Que vous soyez débutant et que vous découvriez Streamlit ou que vous soyez un développeur chevronné cherchant à ajouter plus d'interactivité à vos applications, il est essentiel de comprendre comment utiliser et styliser les boutons. Avec la possibilité de personnaliser le comportement et l'apparence des boutons, ainsi que de gérer les événements de clic, vous pouvez créer une large gamme de fonctionnalités interactives dans vos applications Streamlit. Alors allez-y, commencez à expérimenter avec st.button et voyez ce que vous pouvez créer!
Avez-vous déjà entendu parler de cet incroyable outil d'analyse de données et de visualisation de données, qui transforme votre application Streamlit en Tableau?
PyGWalker (opens in a new tab) est une bibliothèque Python qui vous aide à intégrer facilement une interface utilisateur similaire à Tableau dans votre propre application Streamlit sans effort.
Questions fréquemment posées
Comment créer un bouton dans Streamlit?
Dans Streamlit, vous pouvez créer un bouton en utilisant la fonction st.button. La fonction prend un argument obligatoire, qui est le libellé du bouton.
Comment positionner un bouton dans Streamlit?
Au moment de la rédaction, Streamlit ne prend pas en charge intégrée pour le positionnement des éléments, y compris les boutons. La mise en page d'une application Streamlit est principalement déterminée par l'ordre dans lequel les éléments sont ajoutés dans le script. Cependant, vous pouvez utiliser le balisage et le HTML en combinaison avec CSS pour créer des mises en page personnalisées.
Comment créer un bouton radio sur Streamlit?
Dans Streamlit, vous pouvez créer un groupe de boutons radio en utilisant la fonction st.radio. La fonction prend deux arguments : un libellé pour le groupe de boutons radio et une liste d'options.
Quels sont les inconvénients de Streamlit?
Bien que Streamlit soit un outil puissant pour créer des applications de données, il présente certaines limitations. Par exemple, au moment de la rédaction, il manque une prise en charge intégrée pour créer des mises en page complexes et styliser les éléments. De plus, étant donné que les applications Streamlit sont conçues pour être sans état, la gestion de l'état (comme les saisies utilisateur ou les valeurs de variables) peut être difficile. Cependant, Streamlit est activement développé et maintenu, et de nouvelles fonctionnalités et améliorations y sont régulièrement ajoutées.