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

Question

我使用 sidebarPanel 和 mainPanel 构建了一个具有流体页面和布局的 Shiny 应用程序。现在我正在使用一个最小化sidebarPanel的按钮，但是当发生这种情况时，mainPanel会保留它的宽度。我希望主面板调整到新的屏幕尺寸并使用整个窗口，而不是保持它通常使用的原来的 66%。

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

observeEvent(input$showpanel, {

if(input$showpanel == TRUE) {

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

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

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

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

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

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)