New Component: Streamlit-antd-components,more widgets to extend streamlit!

Hi @ji_haoran,
I love the segmented component for data display. I’m trying to repurpose the styling to hold links for personal links like github, linkedin, etc. Is there a way to link to an external URL on click? Perhaps there’s an on_click parameter I’m missing?

Thanks for your question, I will improve it in the next version, for now you can try using sac.buttons and set compact=True

You are sure! Much appreciated once again, friend! Excellent job! =D

image

Amazing Component! Congrat! Just a question. Is there any way to change the Navigation/Menu item background colors?
Thanks

Thanks for liking this component.
Unfortunately, change background color is not currently supported.
But if you put menu on sidebar,you can change background color with set streamlit Secondary background color configuration.

Hi. I’m using SegmentedItem with no problems locally. After deploying to Streamlit I can only update the content, but the tabs keep jumping back to default. I used version 0.1.16 and when updating to the latest version both local and cloud don’t switch properly. (Streamlit version is latest)

Maybe this isn’t a perfect choice as a navigator? Not sure how to fix it. My code is as follows, many thanks

if 'current_tab' not in st.session_state:
    st.session_state.current_tab = 'A'

with placeholder.container():
        selected_tab = sac.segmented(
            items=[
                sac.SegmentedItem(label='A',icon='1-circle'),
                sac.SegmentedItem(label='B',icon='2-circle'),
            ], 
        )
        
        if selected_tab != st.session_state.current_tab:
            st.session_state.current_tab = selected_tab

if st.session_state.current_tab == 'A':

elif st.session_state.current_tab == 'B':

Hello,i use you code,and the sac.segmented works well locally with the latest version of streamlit and streamlit-antd-components.
Maybe you change the current_tab session state in other widget in you code?
Reinstall the streamlit-antd-components?

import streamlit as st
import streamlit_antd_components as sac

if 'current_tab' not in st.session_state:
    st.session_state.current_tab = 'A'

placeholder = st.empty()

with placeholder.container():
    selected_tab = sac.segmented(
        items=[
            sac.SegmentedItem(label='A', icon='1-circle'),
            sac.SegmentedItem(label='B', icon='2-circle'),
        ],
    )

    if selected_tab != st.session_state.current_tab:
        st.session_state.current_tab = selected_tab

if st.session_state.current_tab == 'A':
    st.write('page A')

elif st.session_state.current_tab == 'B':
    st.write('page B')

demo

The package version:

  • streamlit==1.27.0

  • streamlit-antd-components==0.2.1

I guess it’s a high advance feature but Is there any way to add a callback function? Thanks again for the component!

Add callback function is one of todo list, this feature will be added in the future version of sac, you can continue to follow this project,

The new version v0.2.2 support callback function.

2 Likes

Great!!

Great work! Thanks for support :heart:

Can I associate these components with multi-page setups in Streamlit?

Hi @ji_haoran

Thank you for your amazing contribution with antd-components! It’s truly one of the best streamlit libraries I’ve encountered.

I’ve been working on implementing a sac menu and want to dynamically update the tag information. However, I noticed that every time I update the content, it reloads both the main content window and side bar and refreshes back to the original homepage. I conducted a similar test with a sac segmented component, and it seemed to update without issues, so I think the menu component may be the issue.

I’m wondering if there’s a way to make menu tags dynamic in a future release. I believe this feature would add significant value. In the meantime, please let me know if you have any insights or workarounds I might’ve missed. Thank you!

image
image

Edit: I was able to resolve this by setting up a session_state to hold the current ‘page’ and then re-directing there on load!

https://parser.alphanome.app
We successfully use it in a multi-page setup

Can someone comment on these permissions? Is it from streamlit to passthrough all the access to the elements? Or does it come from antd-components?

<iframe allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking"></iframe>