将按钮点击重定向到R闪亮中另一个导航栏选项卡内嵌的导航栏选项卡。

huangapple go评论65阅读模式
英文:

Redirecting button click to a navbar tab nested inside another navbar tab in R shiny

问题

我有一个使用R Shiny制作的Web应用程序。它有一个导航栏和三个选项卡。让我们称它们为父选项卡。第三个父选项卡中有一个导航栏,其中包含四个子选项卡,而我的第一个父选项卡中有一个按钮。现在,当我点击按钮时,它应该将我带到第三个父选项卡的第二个子选项卡。我尝试使用 updateTabsetPanelupdateNavbarPage 来实现这个目标,但我无法成功。是否有其他方法可以使此工作?以下是示例UI代码:

library(shiny)

ui <- shinyUI(fluidPage(
  titlePanel("My Web App"),
  
  navbarPage(
    "My App",
    id = "first_nav",
    tabPanel(title = "Tab 1",
             value = "tab_1",
             actionButton("btn_tab3", "Go to tab 3.2")
    ),
    tabPanel(title = "Tab 2",
             value = "tab_2",
             h2("This is Tab 2")
    ),
    tabPanel(title = "Tab 3",
             value = "tab_3",
             h2("This is Tab 3"),
             fluidRow(),
             navbarPage(
               title = "third tab navbar",
               id = "second_nav",
               tabPanel(title = "tab 3.1", value = "tab_3_1", h2("This is 3.1")),
               tabPanel(title = "tab 3.2", value = "tab_3_2", h2("This is 3.2")),
               tabPanel(title = "tab 3.3", value = "tab_3_3", h2("This is 3.3")),
               tabPanel(title = "tab 3.4", value = "tab_3_4", h2("This is 3.4")),
             ),
  
    )
  )
))

server <- shinyServer(function(input, output, session) {
  
  observeEvent(input$btn_tab3, {
    # 在按钮点击时切换选项卡的代码
  })
  
})

shinyApp(ui = ui, server = server)
英文:

I have a web app made with R Shiny. It has a navbar and three tabs in it. Let us call them parent tabs. The third parent tab has a navbar in it with four children tabs and my first parent tab has a button. Now, when I click the button, it should take me to the second child tab of the third parent tab. I tried to do this using updateTabsetPanel and updateNavbarPage however, I couldn't do it. Are there any other ways to make this work? This is the sample UI code

library(shiny)


ui &lt;- shinyUI(fluidPage(
  titlePanel(&quot;My Web App&quot;),
  
  navbarPage(
    &quot;My App&quot;,
    id = &quot;first_nav&quot;,
    tabPanel(title = &quot;Tab 1&quot;,
             value = &quot;tab_1&quot;,
             actionButton(&quot;btn_tab3&quot;, &quot;Go to tab 3.2&quot;)
    ),
    tabPanel(title = &quot;Tab 2&quot;,
             value = &quot;tab_2&quot;,
             h2(&quot;This is Tab 2&quot;)
    ),
    tabPanel(title = &quot;Tab 3&quot;,
             value = &quot;tab_3&quot;,
             h2(&quot;This is Tab 3&quot;),
             fluidRow(),
             navbarPage(
               title = &quot;third tab navbar&quot;,
               id = &quot;second_nav&quot;,
               tabPanel(title = &quot;tab 3.1&quot;,value = &quot;tab_3_1&quot;,h2(&quot;This is 3.1&quot;)),
               tabPanel(title = &quot;tab 3.2&quot;,value = &quot;tab_3_2&quot;,h2(&quot;This is 3.2&quot;)),
               tabPanel(title = &quot;tab 3.3&quot;,value = &quot;tab_3_3&quot;,h2(&quot;This is 3.3&quot;)),
               tabPanel(title = &quot;tab 3.4&quot;,value = &quot;tab_3_4&quot;,h2(&quot;This is 3.4&quot;)),
             ),

    )
  )
))

server &lt;- shinyServer(function(input, output, session) {
  
  observeEvent(input$btn_tab3, {
    #code for switching tabs on button click
  })
  
})

shinyApp(ui = ui, server = server)

答案1

得分: 1

以下是代码的翻译部分:

首先,纠正您代码中的拼写错误。接下来,在程序的开头添加一个调用library(shiny)的语句,并编写一个服务器函数。然后调用shinyApp

接下来,将您的tabPanel包装在tabsetPanel的调用中,并删除第三个选项卡中的嵌套navbarPage。我没有调查您是否可以嵌套navbarPage,但即使可以,您也需要为它所期望的参数提供值。我已经用一些fluidRow的调用替代了它。

最后,使用observeEvent来检测按钮点击并做出适当的响应。

这里是一个最小的可重现示例。您应该能够简单地将代码复制并粘贴到您的IDE中运行以查看结果。理想情况下,您的问题会允许我们做同样的事情。

英文:

First, correct the typos in your code. Next, add a call to library(shiny) at the head of your program and write a server function. Then call shinyApp.

Next, wrap your tabPanels in calls to tabsetPanel and remove the nested navbarPage on the third tab. I didn't investigate whether you can nest navbarPages, but even if you can, you need to provide values to the parameters it expects. I've replaced it with a couple of calls to fluidRow.

Finally, use observeEvent to detect your button click and respond appropriately.

Here is a minimal reproducible example. You should be able to simply cut and paste the code into your IDE and run it to see the results. Ideally, your question would have allowed us to do the same.

library(shiny)

ui &lt;- fluidPage(
  ui &lt;- shinyUI(fluidPage(
    titlePanel(&quot;My Web App&quot;),
    
    navbarPage(
      &quot;My App&quot;,
      id = &quot;first_nav&quot;,
      tabsetPanel(
        id = &quot;tabsetPanel1&quot;,
      tabPanel(title = &quot;Tab 1&quot;,
               value = &quot;tab_1&quot;,
               actionButton(&quot;btn_tab3&quot;, &quot;Go to tab 3.2&quot;)
      ),
      tabPanel(title = &quot;Tab 2&quot;,
               value = &quot;tab_2&quot;,
               h2(&quot;This is Tab 2&quot;)
      ),
      tabPanel(title = &quot;Tab 3&quot;,
               value = &quot;tab_3&quot;,
               h2(&quot;This is Tab 3&quot;),
               fluidRow(),
               fluidRow(
                 &quot;third tab navbar&quot;,
               ),
               fluidRow(
                 tabsetPanel(
                   id = &quot;tabsetPanel2&quot;,
                 tabPanel(title = &quot;tab 3.1&quot;,value = &quot;tab_3_1&quot;,h2(&quot;This is 3.1&quot;)),
                 tabPanel(title = &quot;tab 3.2&quot;,value = &quot;tab_3_2&quot;,h2(&quot;This is 3.2&quot;)),
                 tabPanel(title = &quot;tab 3.3&quot;,value = &quot;tab_3_3&quot;,h2(&quot;This is 3.3&quot;)),
                 tabPanel(title = &quot;tab 3.4&quot;,value = &quot;tab_3_4&quot;,h2(&quot;This is 3.4&quot;))
                 ),
               )
            ),
        )
      )
    )
  )
)

server &lt;- function(input, output, session) {
  observeEvent(input$btn_tab3, {
    updateTabsetPanel(session, &quot;tabsetPanel1&quot;, &quot;tab_3&quot;)
    updateTabsetPanel(session, &quot;tabsetPanel2&quot;, &quot;tab_3_2&quot;)
  })
}

shinyApp(ui = ui, server = server)

huangapple
  • 本文由 发表于 2023年7月6日 19:01:41
  • 转载请务必保留本文链接:https://go.coder-hub.com/76628131.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定