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

Posted 2023-03-24

【中文标题】R Shiny - 当我最小化 sidebarPanel 时调整 MainPanel 窗口的大小

【英文标题】：R Shiny - Resizing the MainPanel window when I minimize the sidebarPanel

【发布时间】：2018-03-03 07:00:03

【问题描述】：

我使用 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。

【参考方案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)

【讨论】：

这在我的 Shiny 应用程序 SBista 中有效。感谢您的帮助！