How to create tabs on streamlit that work independently

🎈 Using Streamlit
1

I’m trying to create tabs that works independently on Streamlit.

The official documentation explains here how to create three tabs for eg. and it works fine. But when I change the code of (let’s say the Cat’s tab) so can an error be raised, I can’t anymore switch to Dog’s tab or Owl’s tab.

CODE :

import streamlit as st

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

with tab1:
    st.header("A cat")
    st.image("_", width=200) # I changed here on purpose to raise an error

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)

ERROR :

FileNotFoundError: [Errno 2] No such file or directory: ‘_’

Do you have any solution to fix that ?

2

Hi @nou7lh , you can envelope your tab code with a try-except, like below:

try:
        st.header("A cat")
        st.image("_", width=200) # I changed here on purpose to raise an error

except:
        st.write("There's an error...")
2 Likes
3

Hi @Shawn_Pereira, thank you so much for the support.
Is there by any change a way we can streamlit to not run the code inside a specific tab ?
Actually I have three tabs, the first one takes about 1 minute to display the result (because it proccess some big dataframes with pandas), so it means that I can’t switch to tab2 unless the tab1’s instructions are fully executed. It means I have to wait one minute before switching to tab2 or tab3.

4

With st.tabs, conditional rendering of content is currently not supported.

You could try using the st.radio with the horizontal option to act as tabs. The code should execute only for the option chosen.

If you want to have something visually fancier than st.radio, you have
(a) GitHub - victoryhb/streamlit-option-menu
(b) GitHub - TangleSpace/hydralit_components: A package of custom components for Streamlit and Hydralit. Can be used directly or in combination with the Hydralit package.

Cheers

1 Like
5

Thank you so much @Shawn_Pereira. I’ll give it try and hopefully that st.tabs will support conditionnal rendering very soon.

6

@Shawn_Pereira, I used st.radio and the conditionnal works fine.
Only one problem, I tried to style the buttons but the code below does not work unfortunately :

font_css = """
<style>
button[data-baseweb="radio"] {
font-size: 18px;
font-weight:bold;
}
</style>
"""
choice = st.radio(label='', options=["Cat", "Dog", "Owl"], horizontal=True)
if choice == 'Cat':
    st.header("A cat")
    st.image("_", width=200)

elif choice == 'Dog':
    st.header("A dog")
    st.image("https://static.streamlit.io/examples/dog.jpg", width=200)

elif choice == 'Owl':
    st.header("An owl")
    st.image("https://static.streamlit.io/examples/owl.jpg", width=200)
7

Hi @nou7lh , as mentioned earlier, try out point (a) and/or point (b) in my message above. You have options for colour and icons in your tabs.

Cheers

1 Like