是否可以在 R Shiny 中在父选项卡下设置子选项卡，以便为用户提供更好的选择渠道？

Question

我正在开发一个应用程序，用户需要通过许多选择才能到达他/她想要的位置 go 进行数据分析。 该应用程序需要通过无数的选择轻松地“引导”用户，而不会造成混淆，不会导致死胡同等。例如，将用户从一般选择引导到更具体的选择：

• 漏斗 1：非常一般的选择（下面的第一张和第二张图片：Tab 1 和 Tab 2）
• 漏斗 2：不太一般的选择（下面的第一张图片：在侧边栏面板中）（第二张图片：在子选项卡中）
• 漏斗 3：最具体的选择（下面的第一张图片：主面板顶部的单选按钮）（第二张图片：在侧边栏面板中）

第一张图片：

第二张图片：

我的问题是，是否可以创建类似于我在第二张图片中绘制的子面板的内容，为用户选择提供一个简单的渠道（尽管比我的绘图更漂亮）？ 如果不是，在 Shiny 中，还有哪些其他选项可以通过选择有效地引导用户（如果有）？ 我要去的地方是第一张图片，用户从选项卡 - 侧边栏 - 主面板顶部的单选按钮进入。

第一张图片的可重现代码：

library(shiny)
library(shinyjs)

ui <- 
  
  pageWithSidebar(
    
    headerPanel("Test"),
    sidebarPanel(
      useShinyjs(),
      fluidRow(helpText(h5(strong("Base Input Panel")),align="center")),
      conditionalPanel(
        condition="input.tabselected==1",
        h5("Selections for Tab 1:")
        ),
      conditionalPanel(
        condition="input.tabselected==2",
        h5("Selections for Tab 2:")
        )
      ), # close sidebar panel
    
    mainPanel(
      useShinyjs(),
      tabsetPanel(
        
        tabPanel("Tab 1", value=1,helpText("Tab 1 outputs")), 

        conditionalPanel(condition = "input.tabselected==1",
            fluidRow(helpText("Tab 1 things happen here")),
          ),                 
        
          tabPanel("Tab 2", value=2,
           
           fluidRow(
              radioButtons(
                 inputId = 'mainPanelBtnTab2',
                 label = h5(strong(helpText("Functions to access:"))),
                 choices = c('Function 1','Function 2','Function 3'),
                 selected = 'Function 1',
                 inline = TRUE
               ) # close radio buttons
             ), # close fluid row
           
           conditionalPanel(condition = "input.tabselected==2",
             fluidRow(helpText("Tab 2 things happen here")),              
             conditionalPanel(condition = "input.mainPanelBtnTab2 == 'Function 1'",
                              helpText("You pressed radio button 1")), 
             conditionalPanel(condition = "input.mainPanelBtnTab2 == 'Function 2'",
                              helpText("You pressed radio button 2")),
             conditionalPanel(condition = "input.mainPanelBtnTab2 == 'Function 3'",
                              helpText("You pressed radio button 3"))
             
             ) # close conditional panel
        ),  # close tab panel
        id = "tabselected"
      ) # close tabsetPanel
    ) # close mainPanel
  ) # close pageWithSidebar

server <- function(input,output,session)({}) 

shinyApp(ui, server)

Answer 1

您可以将tabsetPanel()嵌套在现有的tabPanel()中。

library(shiny)
shinyApp(
  fluidPage(
    sidebarLayout(
      sidebarPanel(
        "here is your sidebar",
        uiOutput("tab_controls"),
        uiOutput("subtab_controls")
      ),
      mainPanel(
        tabsetPanel(
          tabPanel(
            "Tab 1", br(),
            tabsetPanel(
              tabPanel("Function 1", "Here's the content for Tab 1, Function 1, with a `br()` between parents and sub-tab"),
              tabPanel("Function 2", "Here's the content for Tab 1, Function 2, with a `br()` between parents and sub-tab"),
              id = "subtab_1"
            )
          ),
          tabPanel(
            "Tab 2",
            tabsetPanel(
              tabPanel("Function 1", "Here's the content for Tab 2, Function 1, with no space between tab levels"),
              tabPanel("Function 2", "Here's the content for Tab 2, Function 2, with no space between tab levels"),
              id = "subtab_2"
            )
          ),
          tabPanel("Tab 3", "Here's some orphaned content without sub-tabs"),
          id = "parent_tabs"
        )
      )
    )
  ),
  
  function(input, output, session) {
    
    output$tab_controls <- renderUI({
      choices = if (input$parent_tabs == "Tab 1") {
        c("choices", "for", "tab 1")
      } else if (input$parent_tabs == "Tab 2") {
        c("tab 2", "settings")
      }

      if (length(choices)) {
        radioButtons(
          "tab_controls",
          "Controls",
          choices = choices
        )
      }

    })
    
    output$subtab_controls <- renderUI({
      if (input$parent_tabs == "Tab 2" & input$subtab_2 == "Function 1") {
        radioButtons(
          "subtab_controls",
          "Additional controls for Tab 2, Function 1",
          choices = letters[1:5]
        )
      } else if (input$parent_tabs == "Tab 2" & input$subtab_2 == "Function 2") {
        selectInput(
          "subtab_controls",
          "Different input for Tab 2, Function 2",
          choices = letters[6:10]
        )
      }

    })
  }
)

在这里，我在顶层有三个选项卡，即选项卡 1-3。 在选项卡 1 和选项卡 2 中，有tabsetPanel s，每个选项卡都有两个用于功能 1-2 的选项卡。

我还展示了两种方法（还有其他方法，如update____Input函数）来根据选择的选项卡更改侧边栏中的控件。 您应该使用tabsetPanel(..., id = "something")指定每个选项卡集。 然后您可以检查input$something的值，这将是其中一个选项卡的标题。