Extra Streamlit Components

Custom Components
1

Hey :wave:t3:,
Since Streamlit supports limited amount of components out of the box, but is very developer friendly to develop new custom components, I have made pip package to further enhance Streamlit you can download it through pip3 install extra-streamlit-components.
I have added 2 components till now, but more can come in the near future. If you want you can make it better even faster by contributing to its open source code base on GitHub, just open a pull request and see it used by other hundreds of developers according to https://pepy.tech/project/extra-streamlit-components.

demo

Code for the displayed demo:

import streamlit as st
import extra_streamlit_components as stx

chosen_id = stx.tab_bar(data=[
    stx.TabBarItemData(id=1, title="ToDo", description="Tasks to take care of"),
    stx.TabBarItemData(id=2, title="Done", description="Tasks taken care of"),
    stx.TabBarItemData(id=3, title="Overdue", description="Tasks missed out"),
], default=1)
st.info(f"{chosen_id=}")
image_urls = ["https://streamlit.io/images/brand/streamlit-logo-secondary-colormark-darktext.svg",
              "https://streamlit.io/images/brand/streamlit-logo-secondary-lightmark-lighttext.png",
              "https://ruslanmv.com/assets/images/posts/2020-10-17-Web-Application-Classification/streamlit_logo.png", ]
stx.bouncing_image(image_source=image_urls[int(chosen_id) - 1], animate=True, animation_time=1500, height=200, width=600)
4 Likes
2

Hello @Mohamed , welcome to the community :slight_smile:

  • This little GIF of a TabBar in the post looks super nice! Do you think you could add a GIF per component to the README on the Github part?
  • For good discoverability, could you add a description of each component inside your project into the Components tracker ? They could point to the same repo but I think a larger part of the community will get to your library if you describe “tab bar” and “bouncing image” in the wiki :wink:

I’ll be looking into it when I have some time :eyes:

Cheers,
Fanilo :balloon:

1 Like
3

Hi @Mohamed - Great component package! Thanks for taking the time to building it.

I’m currently using the stepper_bar in place of a streamlit select_slider. I’m wondering… is it possible to program the stepper bar so that I can select any option at any time?

For example, in order to go from option 1 to option 3, the client needs to select option 2 first (i.e. 1 → 2 → 3). I would like the client to be able to go straight from 1 → 3. I understand I may be using it different than originally created, but if there was some sort of option to unlock or unblock the stepper requiring steps in numerical order, that would be really useful to me.

Thanks again!

4

Hey @Mohamed

I had some trouble with cookie manager, it’s probably because of the way streamlit components work asychronously with the app.

I’ve just built a synchronous way to access localStorage from Streamlit using websockets (streamlit-ws-localstorage), would love to get your take on it.

5

Can we change the colour of the tab_bar or the colour of the label of the tab_bar?

6

I’m having the same issue, did you do it?

I was trying to use custom CSS but it didn’t work :confused: .

7

Hi @Otavio_Maginador,
There is an open issue on Github about this. I have posted it but Mohamed didn’t saw it yet, I think so.
TabBar colors doesn’t match theme · Issue #45 · Mohamed-512/Extra-Streamlit-Components (github.com)

8

Is this feature available yet? Is it possible to override the CSS for the tabs? Is there any alternative suggested to achieve this?