✨ Streamlit Elements - Build draggable and resizable dashboards with Material UI, Nivo charts, and more!

🧩 Streamlit Components
83

you are welcome.

84

Thanks I have found the similar solution for this. Here it is if anyone needs:

with elements("new_element"):
    with mui.Paper(key = 'some_key', elevatio={3},variant="outlined"):
        with mui.List(sx={ "width": '100%', "bgcolor": '' }):
                          for idx, row in enumerate(myDT):
                              with mui.ListItem(key = f"list_item{idx}"):
                                  mui.Checkbox(key=f"checkbox_{idx}",onChange=lambda e: function_clicked(e, row['item']))

The only problem I have here is that always the last row item is passed to the function, but not the one that is checked/clicked.

85

Hi,

does anyone know how you could disable mui.Select depending on other selection (disable/enable)?

Material UI docs says that you can just add disabled with FormControl

      <FormControl sx={{ m: 1, minWidth: 120 }} disabled>

But how you can do it with Streamlit mui? I tried several ways but ended up always with error

Below you can find my code

            with mui.CardContent(sx={"flex": 1, "font_size":"large"}):
                with mui.FormControl( sx={'width':'350px'} ):
                    mui.InputLabel("Option")
                    with mui.Select(
                            value=st.session_state.value_selected,
                            label="Option",
                            onChange=handle_select,                                 
                                ):
                        for x in listofitems:
                            mui.MenuItem(str(x), value=x)
86

Hi @JakeB,

I was recently figuring out the streamlit mui. So, in order to set those parameters that are standing alone like the (disabled) you just add “=True” or “=False” (“disabled=True”). And this will be the way you pass those parameters to mui elements.

87

I’ve been trying to add tooltip to a button. This is what I’ve tried so far:

with mui.Tooltip(title = "Test"):
    mui.Button("Go to page.")

However, I get the following error:

streamlit_elements.core.exceptions.ElementsFrontendError: In elements frame ‘streamlit_elements.core.frame.elements_frame.dashboard’: Cannot read properties of undefined (reading ‘addEventListener’)

Has anyone figured out how to use the button tooltip?

88

You can try using Tooltip this way

import streamlit as st
from streamlit_elements import elements, mui, html

with elements(key='Tooltip'): 
    for i in ['left', 'top', 'bottom', 'right']:
        with mui.Box(): 
            with mui.Tooltip(
                title='Tooltip Information',
                placement=i,  # Tooltip Information
                open=True,
                ):
                html.div(mui.IconButton(mui.icon.Balance))
2 Likes
89

Definitely some progress, thank you! :tada:

The tooltip title is open by default though. I’m trying to figure out how to open it when hovering.

90

It’s very simple, you annotate open=True，例如👇

#open=True
1 Like
91

For whatever reason I was under the impression I had to implement functions to run when hovering. Made it too complex for myself and forgot the obvious, thanks!

Is there any resource to study how to handle mui elements with python?

92

I’m not sure whether you can use WeChat. If you can, you can search the “Streamlit Web” official account. I shared some basic tutorials about mui, hoping to help you.

93

Unfortunately, I can’t, given that I’m outside of China. Thanks nonetheless! :raised_hands:

I’m sharing the finished piece of code for future reference; maybe someone will find it useful.

with mui.CardActions(disableSpacing = True):
     mui.IconButton(mui.icon.Favorite)
     mui.IconButton(mui.icon.Share)
     with elements(key = 'expand_card_tooltip'): 
          with mui.Box(sx = {"border": 0}):
               with mui.Tooltip(title = "Expand project", placement = "bottom"):
                    html.div(mui.IconButton(mui.icon.ExpandCircleDown, onClick = lambda: portfolio_functions.card_expansion_func(self.card_key)))
1 Like
94

I need to refresh the mui elements in order to show data that is updated.

with mui.CardContent(sx={"flex": 1, "font_size":"large"}):
                with mui.FormControl( sx={'width':'350px'} ):
                    mui.InputLabel("Option")
                    with mui.Select(
                            value=st.session_state.value_selected,
                            label="Option",
                            onChange=handle_select,                                 
                                ):
                        for x in listofitems:
                            mui.MenuItem(str(x), value=x)

Having the code like this only the data of list will be updated but the position and all elements are going to stay at the same position.
Like i have checked button on one element and that element is moved to the bottom of the list. But the check button stays checked in the same position, not moved with the same element.
PS. I’m having logic that check in the element needs to be checked or not.