基于导航栏面板显示或隐藏闪亮的小部件

Question

我下面有闪亮的仪表板，右侧边栏中带有shiny小部件。我想知道只有选择tabPanel Plot时才能显示它。

library(shiny)
library(shinydashboardPlus)
shinyApp(
  ui = dashboardPagePlus(
    header = dashboardHeaderPlus(
      enable_rightsidebar = TRUE,
      rightSidebarIcon = "gears"
    ),
    sidebar = dashboardSidebar(),
    body = dashboardBody(
      navbarPage("Navbar!",
                 tabPanel("Plot"

                 ),
                 tabPanel("Summary"
                 ))
    ),
    rightsidebar = rightSidebar(
      background = "dark",
      rightSidebarTabContent(
        id = 1,
        title = "Tab 1",
        icon = "desktop",
        active = TRUE,
        uiOutput("sl")

      )

    ),
    title = "Right Sidebar"
  ),
  server = function(input, output) {
    output$sl<-renderUI({
      sliderInput(
        "obs",
        "Number of observations:",
        min = 0, max = 1000, value = 500
      )
    })


  }
)

Answer 1

您可以使用JavaScript做到：

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
shinyApp(
  ui = dashboardPagePlus(
    header = dashboardHeaderPlus(
      enable_rightsidebar = TRUE,
      rightSidebarIcon = "gears"
    ),
    sidebar = dashboardSidebar(),
    body = dashboardBody(
      navbarPage("Navbar!",
                 tabPanel("Plot"

                 ),
                 tabPanel("Summary"
                 )), 
      tags$script(
        '$("a[data-toggle=\'tab\']").click(function(){
          if ($(this).data("value") == "Plot"){
            $("#sl").show()
          } else {
            $("#sl").hide()
          }
        })'
      )
    ),
    rightsidebar = rightSidebar(
      background = "dark",
      rightSidebarTabContent(
        id = 1,
        title = "Tab 1",
        icon = "desktop",
        active = TRUE,
        uiOutput("sl")

      )

    ),
    title = "Right Sidebar"
  ),
  server = function(input, output) {
    output$sl<-renderUI({
      sliderInput(
        "obs",
        "Number of observations:",
        min = 0, max = 1000, value = 500
      )
    })


  }
)

或带有{golem} JS函数：

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
shinyApp(
  ui = dashboardPagePlus(
    header = dashboardHeaderPlus(
      enable_rightsidebar = TRUE,
      rightSidebarIcon = "gears"
    ),
    sidebar = dashboardSidebar(),
    body = dashboardBody(
      golem::activate_js(),
      navbarPage("Navbar!",
                 tabPanel("Plot"

                 ),
                 tabPanel("Summary"
                 )), 
      tags$script(
        '$("a[data-toggle=\'tab\']").click(function(){
          Shiny.setInputValue("tabactive", $(this).data("value"))
        })'
      )
    ),
    rightsidebar = rightSidebar(
      background = "dark",
      rightSidebarTabContent(
        id = 1,
        title = "Tab 1",
        icon = "desktop",
        active = TRUE,
        uiOutput("sl")

      )

    ),
    title = "Right Sidebar"
  ),
  server = function(input, output) {
    output$sl<-renderUI({
      sliderInput(
        "obs",
        "Number of observations:",
        min = 0, max = 1000, value = 500
      )
    })

    observeEvent( input$tabactive , {
      if (input$tabactive == "Plot"){
        golem::invoke_js("showid", "sl")
      } else {
        golem::invoke_js("hideid", "sl")
      }
    })



  }
)

Answer 2

您还可以在panel的帮助下隐藏整个shinyjs小部件

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

shinyApp(
  ui = dashboardPagePlus(
    header = dashboardHeaderPlus(
      enable_rightsidebar = TRUE,
      rightSidebarIcon = "gears"
    ),
    sidebar = dashboardSidebar(),
    body = dashboardBody(
      useShinyjs(),
      navbarPage("Navbar!",tabPanel("Plot" ),id = "mynavbar",
                 tabPanel("Summary"
                 ))
    ),
    rightsidebar = rightSidebar(
      background = "dark",
      rightSidebarTabContent(
        id = 1,
        title = "Tab 1",
        icon = "desktop",
        active = TRUE,
        uiOutput("sl")
      )
    ),
    title = "Right Sidebar"
  ),
  server = function(input, output, session) {

    observeEvent(input$mynavbar,{
      if(input$mynavbar=="Plot"){
        show("right_sidebar")
      }
      else{
        hide("right_sidebar")
      }
    })

    output$sl<-renderUI({
      sliderInput(
        "obs",
        "Number of observations:",
        min = 0, max = 1000, value = 500
      )
    })
  }
)