如何隐藏侧栏的特定选项卡的闪亮应用程序面板

时间:2020-04-09 12:02:51

标签: r shiny shinyapps

我的Shiny应用程序具有通用的sidebarPanel。我想为一个特定的选项卡隐藏它,即每当使用者导航到该选项卡时,sidebarPanel都会折叠。我正在尝试的代码如下-

UI-

library(shiny)
shinyUI(fluidPage (
  theme = shinytheme("superhero"),
  headerPanel("COVID-19 Data Visualizer"),
  sidebarPanel(
    width = 2,
    selectInput(
      "countries",
      label = "Select Countries",
      choices =
        c("B", "C", "A"),
      selected = c("A"),
      multiple = T
    ),
    submitButton(text = "View")
  ),
  mainPanel (h1(""),
             tabsetPanel(
               tabPanel(
                 "Global Status",
                 div(id="Main"),
                 plotlyOutput("figG"),
                 br(),
                 plotlyOutput("global_time"),
                 br(),
                 plotlyOutput("global_cfr"),
                 br(),
                 plotlyOutput("global_p"),
                 br(),
                 plotlyOutput("global_recov_dead")
               ),
               tabPanel(
                 "Comparative Charts",
                 plotlyOutput("fig_confirm"),
                 br(),
                 plotlyOutput("fig_dead"),
                 br(),
                 plotlyOutput("fig_recov")
               ),
               tabPanel(
                 "Ratio Analysis",
                 plotlyOutput("fig_confirm_S"),
                 br(),
                 plotlyOutput("fig_confirm_D"),
                 br(),
                 plotlyOutput("fig_Ratio"),
                 br(),
                 plotlyOutput("fig_cfr_print")
               )
             ))
))

服务器部分-

server <- function(input, output) {
  observeEvent(input$tabs == "Global Status", {
    shinyjs::hide(id = "Main")
  })

}

我真的不想使用navbarPage并希望所有输入都使用单个sidebarPanel。

我得到的输出的屏幕截图- enter image description here

先谢谢了。

1 个答案:

答案 0 :(得分:2)

这里是一个例子:

library(shiny)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(), 

  sidebarLayout(

    sidebarPanel(
      id="sidebar",
      selectInput(
        "countries", label = "Select Countries",
        choices = c("B", "C", "A"), selected = "A",
        multiple = TRUE
      )
    ),

    mainPanel(
      tabsetPanel(
        tabPanel(
          "Global status",
          sliderInput("s1", "slider 1", 0, 100, 20)
        ),
        tabPanel(
          "Comparative charts",
          sliderInput("s2", "slider 2", 0, 100, 50)
        ),
        tabPanel(
          "Ratio analysis",
          sliderInput("s3", "slider 3", 0, 100, 80)
        ),
        id = "tabset"
      ), 
      id="main"
    )
  )
)

server <- function(input, output){

  observeEvent(input[["tabset"]], {
    if(input[["tabset"]] == "Comparative charts"){
      hideElement(selector = "#sidebar")
      removeCssClass("main", "col-sm-8")
      addCssClass("main", "col-sm-12")
    }else{
      showElement(selector = "#sidebar")
      removeCssClass("main", "col-sm-12")
      addCssClass("main", "col-sm-8")
    }
  })

}

shinyApp(ui = ui, server = server)

enter image description here

相关问题