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

🧩 Custom Components
23

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?

1 Like
24

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

1 Like
25

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

image

1 Like
26

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

1 Like
28

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.

FireShot Capture 006 - streamlit-antd-components - localhost
FireShot Capture 006 - streamlit-antd-components - localhost1212×608 40.9 KB

1 Like
29

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':
1 Like
30

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

1 Like
31

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

1 Like
32

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,

1 Like
33

The new version v0.2.2 support callback function.

3 Likes
34

Great!!

1 Like
35

Great work! Thanks for support :heart:

1 Like
37

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

1 Like
38

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!

2 Likes
39

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

1 Like
40

image
image2628×1344 374 KB

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>
1 Like
42

Hi @ji_haoran there have been many requests for a dialog/ modal to be native within Streamlit. Would you be able to extend your Ant widget library to add a modal/ dialog to Ant Design? That would be useful to many people as you can see on the promote requests on GitHUb

2 Likes
43

Hi there is still the issue that compenents that are within columns and have a call-back function tend to reset after the first click back to their default state. After the second click, they work correctly. Has that ever been resolved?

1 Like
44

Hi @ji_haoran,

Is it possible to have your buttons / segmented not pre-selected to the first option on load?

Thanks in advance,

Cheers

1 Like
45

Yes,in buttons,you can set index=None.
But segmented not work,maybe add this feature in next version.

2 Likes