R Shiny - 在最小化sidebarPanel时调整MainPanel窗口的大小

Question

我使用sidebarPanel和mainPanel构建了一个Shiny应用程序，它具有fluidPage和布局。 现在我正在使用一个最小化sidebarPanel的按钮，但是当发生这种情况时，mainPanel会保留其宽度。 我想要发生的是mainPanel调整到新的屏幕大小并使用整个窗口而不是保持原始66％它通常使用。

这是我在server.r文件中使用的按钮事件：

observeEvent(input$showpanel, {

if(input$showpanel == TRUE) {

shinyjs::show(id = "Sidebar")
shinyjs::enable(id = "Sidebar")
}
else {

  shinyjs::hide(id = "Sidebar")
}
})

这是我在ui.r文件中使用的按钮，该文件当前位于mainPanel窗口的顶部。

mainPanel(
  bsButton("showpanel", "Show/hide sidebar", type = "toggle", value = TRUE),

当我隐藏sidebarPanel时，不知道是否有办法将css或H​​TML添加到mainPanel窗口。

Answer 1

您可以通过将mainPanel的类从col-sm-8更改为col-sm-12来增加宽度。 看看下面的代码：

library(shiny)
library(shinyjs)
library(shinyBS)

ui <- fluidPage(
  useShinyjs(),
  sidebarLayout(

    sidebarPanel(id = "Sidebar",
      h2("This is a sidebar panel")
    ),

    mainPanel(id ="Main",
      bsButton("showpanel", "Show/hide sidebar", type = "toggle", value = TRUE)
    )
  )

)

server <- function(input, output, session){
  observeEvent(input$showpanel, {

    if(input$showpanel == TRUE) {
      removeCssClass("Main", "col-sm-12")
      addCssClass("Main", "col-sm-8")
      shinyjs::show(id = "Sidebar")
      shinyjs::enable(id = "Sidebar")
    }
    else {
     removeCssClass("Main", "col-sm-8")
      addCssClass("Main", "col-sm-12")
      shinyjs::hide(id = "Sidebar")
    }
  })


}

shinyApp(ui = ui, server = server)