闪亮 - 当其中一个面板设置为隐藏时调整其他面板的大小

Question

我正在使用 Shiny 构建一个网络应用程序。我正在添加一个按钮，该按钮将显示/隐藏页面上的某些元素。但是在元素被隐藏后，其他页面组件不会调整自己的大小以填充屏幕。例如，我尝试通过在 shinyjs 中使用切换功能来隐藏侧边栏布局的侧边栏。这是我的代码：

library(shiny)
library(shinyjs)
ui <- fluidPage(useShinyjs(), br(), wellPanel(sidebarLayout(
  sidebarPanel(id="sidebar"),
  mainPanel(wellPanel(actionButton("sideBarControl", label = "Show/Hide")))
)))
server <- function(input, output) {
  observeEvent(input$sideBarControl, {
    shinyjs::toggle(id = "sidebar")
    # potentially some statements here to fix the layout? But what should they be?
  })
}
shinyApp(ui = ui, server = server)

侧边栏在正确单击侧边栏控制按钮时隐藏/显示，但不是调整 mainPanel 的大小以填充屏幕，而是将 mainPanel 向左移动，并在右侧留下一个空格。如何解决这个问题？见下图：

Answer 1

让我回应对我之前建议的评论。由于这与以前有很大不同，因此我编写了一个新答案而不是对其进行编辑。

通常，您可以通过在控制台上运行命令来检查从 UI 描述生成的 HTML 代码。例如，

sidebarPanel(id="sidebar", actionButton("b", "btn"))
##<div class="col-sm-4">
##  <form class="well" id="sidebar">
##    <button id="b" type="button" class="btn btn-default action-button">btn</button>
##  </form>
##</div>

这告诉我们sidebarPanel函数生成了一个嵌套的框架

• div 同类col-sm-4；和
• form 提供的 id

您的示例代码没有移动主面板的原因现在很清楚了；即使你隐藏了sidebar，也就是里面的表格，还是有div包围它的。

所以我们想要一种隐藏div 的方法。不幸的是，我找不到使用sidebarPanel 函数的方法。另一种方法是使用column 函数。

column(width=3, id="col", actionButton("b", "btn"))
##<div class="col-sm-3" id="col">
##  <button id="b" type="button" class="btn btn-default action-button">btn</button>
##</div>

您可以看到column 的输出与sidebarPanel 的输出有点相似。重要的是，column 允许您为 div 元素提供 ID。

所以，这是一个将主面板向左移动的玩具示例（即完全隐藏侧边栏）。

library(shiny)
library(shinyjs)
ui <- fluidPage(useShinyjs(), br(), wellPanel(fluidRow(
  column(width=4, id="spcol", actionButton("dummy", "dummy")),
  column(width=8, wellPanel(actionButton("sideBarControl", 
                                         label = "Show/Hide")))
)))

server <- function(input, output) {
  observeEvent(input$sideBarControl, {
    shinyjs::toggle(id = "spcol")
  })
}
shinyApp(ui = ui, server = server)

现在，让我们处理您的第二点，即让主面板填充，而不是移动。

mainPanel()
##<div class="col-sm-8"></div>

所以它不会填充，因为它的宽度设置为 8。我们想将其更改为 12，我们可以使用 shinyjs 库中的 toggleClass 函数来实现。简而言之，toggleClass 将一个类添加到一个元素（如果没有，则将其删除）。
我相信下面的代码会按照我们的意愿运行。

library(shiny)
library(shinyjs)
ui <- fluidPage(useShinyjs(), br(), wellPanel(fluidRow(
  column(width=4, id="spcol", actionButton("dummy", "dummy")),
  column(width=8, id="main", wellPanel(actionButton("sideBarControl", 
                                                     label = "Show/Hide")))
)))

server <- function(input, output) {
  observeEvent(input$sideBarControl, {
    shinyjs::toggle(id = "spcol")
    shinyjs::toggleClass("main", "col-sm-8")
    shinyjs::toggleClass("main", "col-sm-12")
  })
}
shinyApp(ui = ui, server = server)

另外，这里是另一个工作示例代码，其中两个不同宽度的主面板版本被隐藏并轮流显示。

library(shiny)
library(shinyjs)
ui <- fluidPage(useShinyjs(), br(), wellPanel(fluidRow(
  column(width=4, id="spcol", actionButton("dummy", "dummy")),
  column(width=8, id="main1", wellPanel(actionButton("sideBarControl", 
                                        label = "Show/Hide"))),
  column(width=12, id="main2", wellPanel(actionButton("sideBarControl2", 
                                        label = "Show/Hide")))
)))

server <- function(input, output) {
  shinyjs::toggle(id = "main2")

  observeEvent(input$sideBarControl+input$sideBarControl2, {
    shinyjs::toggle(id = "spcol")
    shinyjs::toggle(id = "main1")
    shinyjs::toggle(id = "main2")
  })
}
shinyApp(ui = ui, server = server)

Answer 2

你试试shinydashboard怎么样？默认情况下，它具有您正在寻找的行为。

https://rstudio.github.io/shinydashboard/get_started.html