如何使用 ui.insert() 插入 ui.page_navbar() 布局？

Question

我有以下 Shiny for Python 应用程序，我想要执行该应用程序，该应用程序以一个简单的欢迎页面开始，该页面要求输入值，并带有一个用户在完成时单击的按钮。 单击按钮后，将呈现一个带有 ui.page_navbar 布局的新页面（包括在欢迎页面输入的文本值）。

这是代码：

from shiny import App, ui, reactive, render

# main ui object for the app
app_ui = ui.page_fluid(
    ui.div(
        (   "Welcome Screen",
            ui.input_text(id='str_val', label='Type in something'),
            ui.input_action_button(id="btn_welcome", label="Proceed!"),
        ),
        id="welcome_screen",
    ),
    ui.div(id="main_page")
)

# main server function for the app
def server(input, output, session):
    @reactive.effect
    @reactive.event(input.btn_welcome, ignore_init=True, ignore_none=True)
    def _():
        ui.remove_ui(selector="div:has(> #welcome_screen)")
        
        ui.insert_ui(
            selector=f"#main-page", 
            where="beforeBegin",
            ui= ui.page_navbar(
                
                ui.nav_panel("Tab 1", "Tab 1 content",ui.output_text('str_val')),
                ui.nav_panel("Tab 2", "Tab 2 content"),
                ui.nav_panel("Tab 3", "Tab 3 content"),
                title="Main Page",
                id="page",
            ),
        )
        
    @render.text
    def str_val():
        return input.str_val()

app = App(app_ui, server)

当我运行此命令时，欢迎屏幕会加载并按预期工作。 当我单击按钮时，欢迎屏幕消失，但屏幕一片空白，ui.page_navbar 布局不会出现。 我之前已成功使用 ui.insert_ui 将内容放置在 div 中，但由于某种原因，它无法与 page_navbar 类型标记一起使用。 我认为问题可能在于 ui.page_navbar 对象无法放置在 div 内（我尝试使用 ui.insert_ui 插入它），但在单独的测试中，我只需放置它就可以做到这一点手动在 app_ui 代码中。

我很感激任何建议。

Answer 1

有一点是

ui.insert_ui

中的选择器包含拼写错误，您可以将其更改为

main_page

而不是

main-page

，以便它与

ui

中定义的内容匹配。

另一件事是，

ui.remove_ui(selector="div:has(> #welcome_screen)")

还删除了

main_page

div（请参阅:has()上的MDN文档），然后

ui.insert_ui

与

selector=f"#main_page"

找不到插入

ui

的位置。相反，您只需使用

ui.remove_ui("#welcome_screen")

即可删除欢迎屏幕。

把它们放在一起，一个完整的最小示例可以写成这样：

from shiny import App, ui, reactive, render

# main ui object for the app
app_ui = ui.page_fluid(
    ui.div(
        (   "Welcome Screen",
            ui.input_text(id='str_val', label='Type in something'),
            ui.input_action_button(id="btn_welcome", label="Proceed!"),
        ),
        id="welcome_screen",
    ),
    ui.div(id="main_page")
)

# main server function for the app
def server(input, output, session):
    @reactive.effect
    @reactive.event(input.btn_welcome, ignore_init=True, ignore_none=True)
    def _():
        ui.remove_ui("#welcome_screen")
        
        ui.insert_ui(
            selector=f"#main_page", 
            where="beforeBegin",
            ui= ui.page_navbar(
                
                ui.nav_panel("Tab 1", "Tab 1 content",ui.output_text('str_val')),
                ui.nav_panel("Tab 2", "Tab 2 content"),
                ui.nav_panel("Tab 3", "Tab 3 content"),
                title="Main Page",
                id="page",
            ),
        )
        
    @render.text
    def str_val():
        return input.str_val()

app = App(app_ui, server)