Dialog close button in Taipy

Question

I'm using Taipy and I was wondering if there was a way to make a dialog without a close button. I want to use this dialog to have a loading animation so it would be good to have this without a close button.

Answer 1

You can modify the appearance of the dialog control by altering its default CSS. Taipy provides the flexibility to customize each visual element to your liking fully.

main.py:

Here’s an example that demonstrates the usage of custom CSS in a Taipy dialog. This example’s critical aspect is adding a custom class_name to the dialog.

from taipy.gui import Gui, notify
import time

show_dialog = False

page = """
<|Submit|button|on_action=submit|>

<|{show_dialog}|dialog|class_name=loading|
<|https://retchhh.files.wordpress.com/2015/03/loading1.gif|image|>
|>
"""

def submit(state):
    notify(state, "info", "Running...")
    state.show_dialog = not state.show_dialog
    time.sleep(5)
    state.show_dialog = not state.show_dialog
    notify(state, "info", "Finished!")

Gui(page).run()

main.css:

In the main.css file, the custom class ‘loading’ is applied to the specific dialog, ensuring that the CSS changes do not affect other dialogs.

The dialog section you’d like to hide is set to ‘display: none’. I know the section is named h2.MuiTypography-root.MuiTypography-h6 because I inspected this section in my app (right-click + inspect), and I took its name. Now, the section will not be displayed anymore.

.loading h2.MuiTypography-root.MuiTypography-h6 {
    display: none;
}