根据 Shinydashboard 中选择的 tabPanel 隐藏和显示侧边栏

时间:2021-03-20 13:04:42

标签: r shiny shinydashboard shinydashboardplus

我在下面有一个闪亮的仪表板,其中有 3 个 tabPanel。在第一个 tabPanel "Resource Allocation" 我希望左右边栏默认打开。在第 2 个和第 3 个选项卡面板 ("Time Series","Longitudinal View") 中,我只想要左侧边栏和右侧边栏,而不仅仅是隐藏,而是通过推动其上方的 "gears" 图标而根本无法打开,该图标应该被删除。在第四个面板 "User Guide" 中,我不想要侧边栏,也根本不想打开其中一个。

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

shinyApp(
  ui = dashboardPage(
    options = list(sidebarExpandOnHover = TRUE),
    header = dashboardHeader(
      titleWidth = "0px"

    ),
    sidebar = dashboardSidebar(minified = TRUE, collapsed = F),
    body = dashboardBody(
      useShinyjs(),#tags$head(tags$script(src="format_number.js")),
      tags$script("document.getElementsByClassName('sidebar-toggle')[0].style.visibility = 'hidden';"),
      tabsetPanel(
        tabPanel("Resource Allocation"),
        tabPanel("Time Series"),
        tabPanel("Longitudinal View"),
        tabPanel("User Guide")
      )
    ),
    controlbar = dashboardControlbar(collapsed = F),
    title = "DashboardPage"
  ),
  server = function(input, output) { }
)

1 个答案:

答案 0 :(得分:1)

我有左侧边栏的解决方案。我相信您可以花一些时间找出右侧边栏的解决方案。请注意,这需要做更多工作才能根据您的需求进行微调。试试这个

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

ui <- shinydashboardPlus::dashboardPage(
  options = list(sidebarExpandOnHover = TRUE),
  shinydashboardPlus::dashboardHeader(
    #titleWidth = "0px"
  ),
  shinydashboardPlus::dashboardSidebar( disable = TRUE ,
    sidebarMenu(
    selectInput(
      "countries", label = "Select Countries",
      choices = c("B", "C", "A"), selected = "A",
      multiple = TRUE
    ))
  ),# minified = TRUE, collapsed = F),
  controlbar = shinydashboardPlus::dashboardControlbar(id = "controlbar", collapsed = F, 
                      skin = "dark",
                      controlbarMenu(
                        id = "menu",
                        controlbarItem(
                          "Tab 1",
                          "Welcome to tab 1"
                        ),
                        controlbarItem(
                          "Tab 2",
                          "Welcome to tab 2"
                        )
                      )
  ),

  shinydashboard::dashboardBody(
    useShinyjs(),
    tabsetPanel( id="tabset",
                 tabPanel("Resource Allocation", value="tab1", plotOutput("plot")),
                 tabPanel("Time Series", value="tab2", plotOutput("plot2")),
                 tabPanel("Longitudinal View", value="tab3", DTOutput("ir")),
                 tabPanel("User Guide", value="tab4", DTOutput("mt"))
    )
  ),
  # controlbar = dashboardControlbar(collapsed = F),
  title = "DashboardPage"
)
server <- function(input, output) {
  output$plot <- renderPlot(plot(cars))
  output$plot2 <- renderPlot(plot(pressure))
  output$mt <- renderDT(mtcars)
  output$ir <- renderDT(iris)

  observeEvent(input[["tabset"]], {
    if(input[["tabset"]] == "tab4"){
      addClass(selector = "body", class = "sidebar-collapse")
      updateControlbar("controlbar")
    }else{
      removeClass(selector = "body", class = "sidebar-collapse")
    }
  })

}

shinyApp(ui, server)