Finanzas Personales con Streamlit #4: Layout

¡Hola! ¡Bienvenidos a otra entrega de nuestra mini-serie sobre Streamlit! En el último capítulo, exploramos cómo crear elementos interactivos, y hoy aprenderemos a ubicar estos elementos en la interfaz de la app.

Streamlit nos ofrece diversas opciones para mostrar estos elementos en la interfaz, ¡y lo mejor es que hacerlo es súper sencillo con unas pocas líneas de código!

Antes de comenzar, echemos un vistazo a la estructura típica de la interfaz de Streamlit. A la izquierda, tenemos la "sidebar" (de color morado), y a la derecha, la página principal (de color naranja). Estas dos áreas trabajan juntas para ofrecer una experiencia fluida y bien organizada.

Sidebar

Empecemos con la “sidebar”. Este elemento tiene dos funciones principales:

1. Como índice cuando hay más de una página en la app. Lo explicamos en el “Finanzas Personales con Streamlit #1”

2. Organizar los wigdets interactivos

Para colocar elementos en la sidebar, puedes utilizar la notación de objeto:

# Notación de objeto
st.sidebar.[element_name]

O puedes usar la notación “with”:

# Notación 'with'
with st.sidebar:
    st.[element_name]

Por ejemplo, si queremos crear un selectbox y un radio button en la sidebar, podemos hacerlo así:

import streamlit as st

# Notación de objeto
add_selectbox = st.sidebar.selectbox(
    "¿Como te gustaría ser contactado?",
    ("Correo electrónico", "Teléfono Móvil")
)

# Notación 'with'
with st.sidebar:
    add_radio = st.radio(
        "Selecciona un método de envío",
        ("Estándar(5-15 días)", "Rápido(2-5 days)")
    )

Pantalla principal

Pasemos ahora a la pantalla principal. Streamlit ofrece varias opciones para controlar la disposición de los elementos en ella.

• Contenedores

• Columnas

• Pestañas

• Ampliador

Su uso se puede llegar a combinar, es decir, no por usar uno, ya no seremos capaces de usar otro. Por ejemplo, podemos usar un ampliador dentro de una columna o de una pestaña.

Al igual que con la sidebar se puede utilizar notación objeto y notación ‘with’.

• Contenedores

Inserta una ‘caja’ invisible en la página que puede utilizarse para contener múltiples elementos. Estos elementos invisibles te permiten agrupar múltiples elementos en la página sin preocuparte por el orden de escritura del código.

import streamlit as st

container = st.container()
container.write("Esto esta en el contenedor")
st.write("Esto esta fuera del contenedor")

container.write("Esto también esta dentro")

• Columnas

Se tratan de contenedores dispuestos en columnas.

1. Se puede indicar el ancho de la columna, así como el espaciado entre ellas

2. Se pueden anidar columnas dentro de columnas, hasta un grado de anidación.

import streamlit as st

col1, col2, col3 = st.columns(3)

with col1:
   st.header("A cat")
   st.image("https://static.streamlit.io/examples/cat.jpg")

with col2:
   st.header("A dog")
   st.image("https://static.streamlit.io/examples/dog.jpg")

with col3:
   st.header("An owl")
   st.image("https://static.streamlit.io/examples/owl.jpg")

• Pestañas

  

Las pestañas son ideales cuando quieres agrupar contenido relacionado y permitir a los usuarios desplazarse fácilmente entre ellos.

Cada pestaña se corresponde con un contenedor único en el que añadir la información

import streamlit as st

tab1, tab2, tab3 = st.tabs(["Cat", "Dog", "Owl"])

with tab1:
   st.header("A cat")
   st.image("https://static.streamlit.io/examples/cat.jpg", width=200)

with tab2:
   st.header("A dog")
   st.image("https://static.streamlit.io/examples/dog.jpg", width=200)

with tab3:
   st.header("An owl")
   st.image("https://static.streamlit.io/examples/owl.jpg", width=200)

• Ampliador

Inserta un contenedor multi-elemento que puede ser expandido/colapsado por el usuario. Cuando está contraido, lo único visible es la etiqueta proporcionada.

import streamlit as st

st.bar_chart({"data": [1, 5, 2, 6, 2, 1]})

expander = st.expander("See explanation")
expander.write(\"\"\"
    The chart above shows some numbers I picked for you.
    I rolled actual dice for these, so they're *guaranteed* to
    be random.
\"\"\")
expander.image("https://static.streamlit.io/examples/dice.jpg")

Personalización

Además de las opciones integradas en Streamlit, también existen soluciones creadas por la comunidad para personalizar aún más tus aplicaciones. Algunas de las más relevantes son:

• Streamlit Elements: Permite interactuar dinámicamente con los elementos.

• st_pages: Te permite configurar subpáginas, anidarlas, ordenarlas, etc. Además, puedes personalizar la apariencia de tu aplicación, como modificar la barra lateral para darle un look único.

Meter mi ejemplo mejor

¡Y eso es todo por hoy! Con lo que has aprendido, podrás mejorar la apariencia de tus aplicaciones y organizar la información de manera que sea fácil de navegar y encontrar.

---

¡MUCHAS GRACIAS!

Si el artículo te ha gustado, dejar un ❤️ y compartirlo con alguien a quién creas que pueda servirle sería la MEJOR FORMA DE VALORAR MI TRABAJO

Cada semana recibirás en tu bandeja de entrada algo nuevo que aprender sobre el mundo de los datos.