如何在闪亮应用中折叠侧边栏面板？ [英] How to collapse sidebarPanel in shiny app?

问题描述

我有一个闪亮的应用程序，它在navbarPage的tabPanel中有一个mainPanel和一个侧边栏Panel。我需要一个类似下面的选项来隐藏侧边栏面板：Hide sidebar in default in shinydashboard和https://github.com/daattali/shinyjs/issues/43。

actionButton应控制侧边栏面板是显示还是折叠。

代码如下：

library(shiny)
library(shinyjs)

ui <- fluidPage(
  navbarPage("",
             tabPanel("tab",
                      sidebarPanel(
                        useShinyjs()
                      ),
                  
                      mainPanel(actionButton("showSidebar", "Show sidebar"),
                                actionButton("hideSidebar", "Hide sidebar")
                      )
             )
  )
)

server <-function(input, output, session) {
  observeEvent(input$showSidebar, {
    shinyjs::removeClass(selector = "body", class = "sidebarPanel-collapse")
  })
  observeEvent(input$hideSidebar, {
    shinyjs::addClass(selector = "body", class = "sidebarPanel-collapse")
  })
}

shinyApp(ui, server)

推荐答案

我已修改您的代码以隐藏和显示侧边栏。要为sidebarPanel创建id，我将其封装在div中并赋予id = Sidebar。要显示和隐藏我使用的shinyjs函数show和hide，ID为Sidebar。

library(shiny)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(),
  navbarPage("",
             tabPanel("tab",
                      div( id ="Sidebar",sidebarPanel(
                      )),
                      
                      
                      mainPanel(actionButton("showSidebar", "Show sidebar"),
                                actionButton("hideSidebar", "Hide sidebar")
                      )
             )
  )
)

server <-function(input, output, session) {
  observeEvent(input$showSidebar, {
    shinyjs::show(id = "Sidebar")
  })
  observeEvent(input$hideSidebar, {
    shinyjs::hide(id = "Sidebar")
  })
}

shinyApp(ui, server)

这篇关于如何在闪亮应用中折叠侧边栏面板？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！