在闪亮的应用程序中使用 actionButton 或另一个 actionButton 激活 tabItem

Question

我在下面有一个闪亮的应用程序，其中包括 tabItems。我希望在第一次启动应用程序时显示一个操作按钮，该按钮将不在 tabItems 内容中。然后当我按下它时，我将被移动到同意选项卡项中。该按钮从那里以后将不再有用，并且它应该消失，因为将显示 tabItems 的内容。我还希望用户能够在按下"Get Started" 按钮之前按下Consent 按钮，并且仍然能够移动到Consent tabItem。

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(shinyjs)

mytitle <- paste0("")
dbHeader <- dashboardHeaderPlus(
  titleWidth = "0px",
  tags$li(a(
    div(style="display: inline;margin-top:-35px; padding: 0px 90px 0px 1250px ;font-size: 44px ;color:#001641;font-family:Chronicle Display Light; width: 500px;",HTML(mytitle)),


    div(style="display: inline;padding: 0px 0px 0px 0px;vertical-align:top; width: 150px;", actionButton("conse", "Consent",
                                                                                                         style=" background-color: #faf0e6; border-color: #faf0e6") ),

  ),  class = "dropdown")
)

shinyApp(
  ui = dashboardPagePlus(
    header = dbHeader,
    sidebar = dashboardSidebar(width = "0px",
                               sidebarMenu(id = "sidebar", # id important for updateTabItems
                                           menuItem("Consent", tabName = "conse", icon = icon("line-chart"))
                               )           ),
    body = dashboardBody(
      tags$head(tags$style(HTML('

    '))),
      useShinyjs(),
      tags$script(HTML("$('body').addClass('fixed');")),

      tags$head(tags$style(".skin-blue .main-header .logo { padding: 0px;}")),

      actionButton("button", "Get started",style='padding:4px; font-size:140%'),
      tabItems(
        tabItem("conse", textInput("pos", label = ("Position"), value = "") )
      )

    )

  ),
  server<-shinyServer(function(input, output,session) {
    hide(selector = "body > div > header > nav > a")
    shinyjs::hide("conse")
    shinyjs::hide("pos")

    observeEvent(input$button, {
      shinyjs::show("conse")
      shinyjs::show("pos")
      updateTabItems(session, "sidebar",
                     selected = "conse")
      shinyjs::hide("button")

    })

  }
  )
)

Answer 1

一种方法是使用shinyjs 隐藏tabItem 中的元素。相关代码如下。

shinyApp(
  ui = dashboardPagePlus(
    header = dbHeader,
    sidebar = dashboardSidebar(width = "0px",
                               sidebarMenu(id = "sidebar", # id important for updateTabItems
                                           menuItem("Consent", tabName = "conse", icon = icon("line-chart"))
                               )
                               ),
    body = dashboardBody(
      useShinyjs(),
      tags$script(HTML("$('body').addClass('fixed');")),

      tags$head(tags$style(".skin-blue .main-header .logo { padding: 0px;}")),

      actionButton("button", "Get started", style='padding:4px; font-size:140%'),
      tabItems(
        tabItem("conse", textInput("pos", label = ("Position"), value = "")
                )
      )

    )
  ),

  server<-shinyServer(function(input, output,session) {
    hide(selector = "body > div > header > nav > a")
    shinyjs::hide("pos")

    observeEvent(input$button, {
      shinyjs::show("pos")
      updateTabItems(session, "sidebar", selected = "conse")
      shinyjs::hide("button")

    })
    observeEvent(input$conse, {
        shinyjs::show("pos")
        updateTabItems(session, "sidebar", selected = "conse")
        shinyjs::hide("button")

    })

  }
  )
)

另一种方法是使用conditionalPanel 隐藏选项卡中的所有项目。根据您的用例，这可能是更好的选择。

shinyApp(
  ui = dashboardPagePlus(
    header = dbHeader,
    sidebar = dashboardSidebar(width = "0px",
                               sidebarMenu(id = "sidebar", # id important for updateTabItems
                                           menuItem("Consent", tabName = "conse", icon = icon("line-chart"))
                               )           
    ),
    body = dashboardBody(
      useShinyjs(),
      tags$script(HTML("$('body').addClass('fixed');")),
      
      tags$head(tags$style(".skin-blue .main-header .logo { padding: 0px;}")),
      
      actionButton("button", "Get started", style='padding:4px; font-size:140%'),
      
      tabItems(
        tabItem("conse", 
                conditionalPanel(condition = "input.conse >0 || input.button>0",
                                 textInput("pos", label = ("Position"), value = "")
                )
        )
      )
      
    )
  ),
  
  server<-shinyServer(function(input, output,session) {
    hide(selector = "body > div > header > nav > a")
    
    observeEvent(input$button, {
      updateTabItems(session, "sidebar", selected = "conse")
      shinyjs::hide("button")
      
    })
    observeEvent(input$conse, {
      updateTabItems(session, "sidebar", selected = "conse")
      shinyjs::hide("button")
    })
    
  }
  )
)