Modal
#| standalone: true
#| components: [viewer]
#| viewerHeight: 400
## file: app.py
from shiny import App, reactive, ui
app_ui = ui.page_fluid(
ui.input_action_button("show", "Show modal dialog"),
)
def server(input, output, session):
@reactive.effect
@reactive.event(input.show)
def _():
m = ui.modal(
"This is a somewhat important message.",
title="Somewhat important message",
easy_close=True,
footer=ui.modal_button("Dismiss"),
)
ui.modal_show(m)
app = App(app_ui, server)from shiny import App, reactive, ui
app_ui = ui.page_fixed(
ui.input_action_button("show", "Show modal dialog"),
)
def server(input, output, session):
@reactive.effect
@reactive.event(input.show)
def _():
m = ui.modal(
"This is a somewhat important message.",
title="Somewhat important message",
easy_close=True,
)
ui.modal_show(m)
app = App(app_ui, server)Relevant Functions
-
ui.modal
ui.modal(*args, title=None, footer=MISSING, size='m', easy_close=False, fade=True, **kwargs) -
ui.modal_show
ui.modal_show(modal, session=None) -
ui.modal_remove
ui.modal_remove(session=None) -
ui.modal_button
ui.modal_button(label, icon=None, **kwargs)
Details
A modal is a dialog box that appears in front of the app. You can use modals to display messages, curate the user experience, or collect user input, like passwords and usernames.
To create a modal, first assemble the components of the modal with ui.modal() and save them to an object. Then call ui.modal_show() on the object to display the modal.
Typically, you will want to create a reactive effect to call ui.modal_show() whenever a particular event occurs. For example, the reactive effect below will open a modal whenever the value of input.show() changes.
@reactive.effect
@reactive.event(input.show)
def _():
m = ui.modal(
"This is a somewhat important message.",
title="Somewhat important message",
easy_close=True
)
ui.modal_show(m)Modal contents
To add elements to a modal, pass them as unnamed arguments to ui.modal(). Modals can contain any UI elements recognized by Shiny.
Modals come in four sizes: small ('s'), medium ('m') (the default), large ('l'), and extra-large ('xl'). Set the size of a modal with the size argument of ui.modal().
See Also: Notifications provide a similar, but alternative way to display information to the user.
Variations
Modal for authentication
Place inputs inside a modal to collect, and then login with, database credentials.
#| standalone: true
#| components: [viewer]
#| viewerHeight: 500
from shiny import App, reactive, ui
app_ui = ui.page_fixed(ui.input_action_button("login", "Login to database"))
def server(input, output, session):
@reactive.effect
@reactive.event(input.login)
def _():
m = ui.modal(
ui.input_text("name", "Username:"),
ui.input_password("password", "Password:"),
ui.input_action_button("connect", "Connect"),
title="Database Credentials",
easy_close=True,
footer=None,
)
ui.modal_show(m)
@reactive.effect
@reactive.event(input.connect)
def __():
ui.modal_remove()
# Code to connect with input.name() and input.password()
app = App(app_ui, server)from shiny import reactive
from shiny.express import input, ui
ui.input_action_button("login", "Login to database")
@reactive.effect
@reactive.event(input.login)
def show_login_modal():
m = ui.modal(
ui.input_text("name", "Username:"),
ui.input_password("password", "Password:"),
ui.input_action_button("connect", "Connect"),
title="Database Credentials",
easy_close=True,
footer=None,
)
ui.modal_show(m)
@reactive.effect
@reactive.event(input.connect)
def connect_to_databaset():
ui.modal_remove()
# Code to connect with input.name() and input.password() from shiny import App, reactive, ui
app_ui = ui.page_fixed(ui.input_action_button("login", "Login to database"))
def server(input, output, session):
@reactive.effect
@reactive.event(input.login)
def _():
m = ui.modal(
ui.input_text("name", "Username:"),
ui.input_password("password", "Password:"),
ui.input_action_button("connect", "Connect"),
title="Database Credentials",
easy_close=True,
footer=None,
)
ui.modal_show(m)
@reactive.effect
@reactive.event(input.connect)
def __():
ui.modal_remove()
# Code to connect with input.name() and input.password()
app = App(app_ui, server)