New Component st_tabs

Custom Components
1

A new way to create a Tab Bar in Streamlit. While st.tabs handles this functionality really well.Some use cases are there to have a Tab Bar with a little different styling apart from the theme where this component comes into the picture. It provides the functionality to change fontSize , fontWeight,textColor,HoverStateColor and background of the Tab bar.

Visual Representation can be found here - https://st-tabs.streamlit.app/

For more information : GitHub - PrathamJha1/st_tabs: Package to make customizable Tab Bar

2

@Pratham_Jha1
It’s important to add a preview in your current post as well as your GitHub so we get a sense of what this looks like as it is supposed to serve a visual purpose (different styling).

3

@IndigoWizard
Surely added the link to a demo app for visual representation. Also Couldn’t figure out how to post image here so deployed one app for representation.

4

@Pratham_Jha1 The link to a demo app is enough.

I tried the tabs demo and it looks smooth, nice one!

PS: If you want to post images, in the text box there’s an image icon on the toolbar (alongside text formatting options)
Bonus tips:

  • Another way is to just take a screeshot then use ctrl+v directly in the text box it will detect the image from your clipboard like it does for copy/pasted text. Streamlit forum hosts images like GitHub and autogenerates it’s own sharable link:

    image
    image1366Ă—768 8.78 KB

  • Otherwise, you can host the image where else and put it in markdown format:
    ![alt-text|200x200](image url)

5

Thanks for the info.I hope this component will empower tab styling in streamlit.

6

Hi - in the demo this component doesn’t adapt to the Streamlit theme. Is that supported? If not, might be a good idea to implement that.

7

The idea is to have something little different than streamlit theme. One can add the streamlit theme variables in order to align it with the streamlit theme.