Más allá de lo básico: Guía completa para los botones de Streamlit
- Name
- Olaf Källström
Published on
Streamlit ha revolucionado la forma en que construimos aplicaciones de datos. Con su enfoque de bajo código, ha hecho posible que científicos de datos y desarrolladores creen aplicaciones interactivas y fáciles de usar con facilidad. Uno de los elementos clave en Streamlit que contribuye a esta interactividad es el humilde botón. En esta guía, profundizaremos en el mundo de st.button de Streamlit, explorando su uso, opciones de estilo y capacidades basadas en eventos. También proporcionaremos ejemplos prácticos tanto para principiantes como para desarrolladores experimentados.
¿Has oído hablar de esta increíble herramienta de análisis de datos y visualización de datos que convierte tu aplicación de Streamlit en Tableau?
PyGWalker (opens in a new tab) es una biblioteca de Python que te ayuda a incrustar fácilmente una interfaz similar a Tableau en tu propia aplicación de Streamlit sin esfuerzo. Echa un vistazo a este increíble video producido por Sven de Coding is Fun (opens in a new tab) que muestra los pasos detallados para potenciar tu aplicación de Streamlit con esta poderosa biblioteca de visualización de datos en Python!
Agradecimientos especiales a Sven y su gran contribución (opens in a new tab) a la comunidad de PyGWalker.
Además, también puedes consultar la página de GitHub de PyGWalker (opens in a new tab) para obtener más ejemplos de PyGWalker.
Entendiendo st.button en Streamlit
¿Qué es st.button en Streamlit?
En Streamlit, st.button es una función que crea un widget de botón. Es una herramienta simple pero poderosa que te permite agregar interactividad a tus aplicaciones de Streamlit. Cuando un usuario hace clic en un botón, desencadena un evento que se puede utilizar para realizar una acción específica o actualizar el estado de la aplicación.
if st.button('Di Hola'):
st.write('¡Hola, Streamlit!')En el ejemplo anterior, cuando se hace clic en el botón "Di Hola", se muestra en la pantalla el texto "¡Hola, Streamlit!".
Cómo usar st.button en Streamlit
Usar st.button en Streamlit es sencillo. La función toma un argumento requerido: la etiqueta del botón, que es una cadena de texto. También acepta varios argumentos opcionales que te permiten personalizar el comportamiento y la apariencia del botón. Veamos algunos de estos argumentos:
key: Un identificador único para el botón. Esto es útil cuando tienes múltiples botones y quieres distinguir entre ellos.help: Una cadena de texto que se mostrará como un mensaje emergente cuando el usuario pase el puntero sobre el botón.
if st.button('Haz clic aquí', key='mi_boton', help='Haz clic en este botón para realizar una acción'):
st.write('¡Hiciste clic en el botón!')Explorando Argumentos y Opciones de Estilo para el Botón de Streamlit
La función st.button de Streamlit proporciona varios argumentos que te permiten personalizar la apariencia y el comportamiento de tus botones. Sin embargo, hasta la fecha de escritura de este documento, Streamlit no admite cambiar el color y el tamaño de un botón directamente a través de la función st.button.
Dar Estilo a los Botones de Streamlit con CSS
Aunque Streamlit no proporciona opciones integradas para dar estilo a los botones, puedes usar CSS para personalizar tus botones. Puedes inyectar CSS personalizado en tu aplicación de Streamlit utilizando la función st.markdown con el argumento unsafe_allow_html=True. Aquí tienes un ejemplo:
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">Botón Personalizado</button>
""", unsafe_allow_html=True)En este ejemplo, hemos creado un botón personalizado con un fondo verde, texto blanco y algo de espacio interno. También hemos añadido un efecto "hover" que reduce la opacidad del botón cuando el ratón se sitúa sobre él.
El evento on_clickButton en Streamlit
En Streamlit, el evento on_click se desencadena cuando se hace clic en un botón. Este evento se puede utilizar para realizar una acción específica o actualizar el estado de la aplicación. Por ejemplo, podrías usar el evento on_click para actualizar datos, mostrar u ocultar contenido o realizar un cálculo.
Aquí tienes un ejemplo de cómo podrías usar el evento on_click en Streamlit:
def decir_hola():
st.write('¡Hola, Streamlit!')
boton = st.button('Di Hola')
boton.on_click(decir_hola)En este ejemplo, cuando se hace clic en el botón "Di Hola", se llama a la función decir_hola, que escribe "¡Hola, Streamlit!" en la pantalla.
Ejemplos Prácticos del Botón de Streamlit
st.button de Streamlit no es solo un concepto teórico, es una herramienta práctica que puedes usar para agregar interactividad en tus aplicaciones. Veamos algunos ejemplos que ilustran cómo usarlo de manera efectiva.
Ejemplos de Botones de Streamlit para Principiantes
Si eres nuevo en Streamlit, aquí tienes un ejemplo sencillo para empezar. Este código crea un botón que, cuando se hace clic, muestra un mensaje:
if st.button('Haz clic aquí'):
st.write('¡Hiciste clic en el botón!')En este ejemplo, st.button('Haz clic aquí') crea un botón con la etiqueta "Haz clic aquí". Cuando se hace clic en este botón, se ejecuta st.write('¡Hiciste clic en el botón!'), y se muestra el mensaje "¡Hiciste clic en el botón!" en la pantalla.
Uso Avanzado de los Botones de Streamlit
Para usuarios más avanzados, puedes usar botones para controlar el flujo de tu aplicación. Por ejemplo, podrías crear un botón que cargue datos cuando se hace clic:
if st.button('Cargar datos'):
data = cargar_datos()
st.write(data)En este ejemplo, al hacer clic en el botón 'Cargar datos', se llama a la función cargar_datos y se muestra los datos devueltos en la pantalla.
Conclusión
El st.button de Streamlit es una herramienta poderosa para crear aplicaciones interactivas y amigables para el usuario. Ya sea que seas un principiante que recién comienza con Streamlit o un desarrollador experimentado que busca agregar más interactividad a tus aplicaciones, comprender cómo usar y diseñar botones es esencial. Con la capacidad de personalizar el comportamiento y la apariencia de los botones, así como manejar eventos de clic, puedes crear una amplia gama de funciones interactivas en tus aplicaciones de Streamlit. Así que adelante, comienza a experimentar con st.button y ¡ve qué puedes crear!
¿Has oído hablar de esta increíble herramienta de análisis de datos y visualización de datos, que convierte tu aplicación Streamlit en Tableau?
PyGWalker (opens in a new tab) es una biblioteca de Python que te ayuda a incrustar fácilmente una interfaz similar a Tableau en tu propia aplicación de Streamlit sin esfuerzo.
Preguntas frecuentes
¿Cómo hago un botón en Streamlit?
En Streamlit, puedes crear un botón usando la función st.button. La función toma un argumento requerido, que es la etiqueta del botón.
¿Cómo posiciono un botón en Streamlit?
Hasta el momento de escribir esto, Streamlit no proporciona soporte incorporado para posicionar elementos, incluyendo botones. El diseño de una aplicación Streamlit está principalmente determinado por el orden en que se agregan los elementos en el script. Sin embargo, puedes utilizar markdown y HTML en combinación con CSS para crear diseños personalizados.
¿Cómo hago un botón de selección en Streamlit?
En Streamlit, puedes crear un grupo de botones de selección usando la función st.radio. La función toma dos argumentos: una etiqueta para el grupo de botones de selección y una lista de opciones.
¿Cuáles son las desventajas de Streamlit?
Si bien Streamlit es una herramienta poderosa para crear aplicaciones de datos, tiene algunas limitaciones. Por ejemplo, hasta el momento de escribir esto, carece de soporte incorporado para crear diseños complejos y dar estilo a los elementos. Además, debido a que las aplicaciones de Streamlit están diseñadas para ser stateless, puede ser desafiante administrar el estado (como las entradas del usuario o los valores de las variables). Sin embargo, Streamlit se desarrolla y mantiene activamente, y regularmente se agregan nuevas características y mejoras.