st-mui-dialog

Streamlit MUI Dialog Component

This streamlit component adds a Dialog (Modal) with two buttons to Streamlit Apps.

It implements the MUI Alert Dialog: https://mui.com/material-ui/react-dialog/

Installation

$ pip install st-mui-dialog

Usage

Import the Component

$ from st_mui_dialog import st_mui_dialog

Initialize an instant

$ answer = st_mui_dialog(title="Confirmation", content="Please confirm that you want to save the changes")

Configuration Options

Button Labels

#Open Button Label
st_mui_dialog(..., button_txt = "Open the Dialog")

#Abort Button Label
st_mui_dialog(..., abortlabel = "DISAGREE")

#Agree Button Label
st_mui_dialog(..., abortlabel = "AGREE")

Styling

Dividers

st_mui_dialog(..., divider = True)

Open the Dialog in Fullscreen (whole iFrame)

#The open button will be hidden

st_mui_dialog(..., fullscreen = True)

Transition Modes

Currently not working

st_mui_dialog(..., transition_mode = "zoom")

#if the transition mode is 'slide' the paramater 'slide_direction' is needed
st_mui_dialog(..., transition_mode = "slide", slide_direction = "up")

Width of the Dialog

The width is always limited to the widht of the iframe

#Sets the max width to "xl"
st_mui_dialog(..., width_dialog = "xl")

#Always shows the max width of the dialog - If false the width will be dependent on the content.
st_mui_dialog(..., adapt_width_dialog = True)

Button Styles

#Button Types

#Open Button
st_mui_dialog(..., button_open_type = "primary")

#Agree Button
st_mui_dialog(..., button_agree_type = "warning")

#Abort Button
st_mui_dialog(..., button_abort_type = "success")

CSS Styles

It is possible to apply CSS Styles to the different MUI Elements of the Dialog

st_mui_dialog(..., styling_dialog = """{"& .MuiModal-backdrop": {"backgroundColor": "red"},"& .MuiModal-container":{"backgroundColor" :"red"}""")
st_mui_dialog(..., styling_open_button = """{"backgroundColor" :"lightgreen"}""")
st_mui_dialog(..., styling_agree_button = """{"backgroundColor" :"yellow"}"""")
st_mui_dialog(..., styling_abort_button = """{"backgroundColor" :"blue"}""")
st_mui_dialog(..., styling_dialog_content = """{"backgroundColor" :"blue"}""")
st_mui_dialog(..., styling_dialog_title = """{"backgroundColor" :"blue"}""")
st_mui_dialog(..., styling_dialog_content_text = """{"backgroundColor" :"blue"}""")

Event Handlers

It is possible to execute JavaScript commands on Open, Close, Agree and Abort.

st_mui_dialog(..., on_open = """console.log("Open")""")
st_mui_dialog(..., on_close = """console.log("Close")""")
st_mui_dialog(..., on_agree = """console.log("Agree")""")
st_mui_dialog(..., on_abort = """console.log("Abort")""")