如何最小化 Shiny App 中的 sidebarLayout？

Question

我正在构建一个闪亮的应用程序，并且我正在使用两个侧边栏布局。我正在寻找一种方法来最小化它们。我尝试将每个 sidebarLayout 放入一个盒子中。

示例代码：

library(shiny)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(),
  headerPanel("Here goes the heder"),
  box(sidebarLayout(
          sidebarPanel(textOutput("someinputs")),
          
          mainPanel(textOutput("someoutputs"))),
          
          width = 12,
          title = "BB",
          collapsible = T,
          collapsed = F
    
  )
)

server <- function(input, output) {
  
  output$someinputs <- renderText({
    "Here will go the inputs"
  })
  
  output$someoutputs <- renderText({
    "Here will go the outputs"
  })
  
  }

shinyApp(ui, server)

输出： 当我按下可折叠按钮时，布局不会折叠。 为什么会这样？我应该怎么办？还有其他方法吗？

Answer 1

因为你没有使用shinydashboard。盒子来自 shinydashboard 包裹。您需要使用 shinydashboard::dashboardPage 而不是 fluidPage。 dashboardPage 加载所需的 javascript 和 CSS 文件以切换按钮。

library(shiny)
ui <- shinydashboard::dashboardPage(
    shinydashboard::dashboardHeader(),
    shinydashboard::dashboardSidebar(),
    shinydashboard::dashboardBody(
        headerPanel("Here goes the heder"),
        shinydashboard::box(
            width = 12,
            title = "BB",
            collapsible = TRUE,
            collapsed = FALSE,
            sidebarLayout(
                sidebarPanel(textOutput("someinputs")),
                mainPanel(textOutput("someoutputs")))
        ) 
    )
)

如果不想使用dashboardPage，可以自己写脚本来控制按钮：

library(magrittr)
library(shiny)
ui <- fluidPage(
    headerPanel("Here goes the heder"),
    shinydashboard::box(
        width = 12,
        title = "BB",
        collapsible = TRUE,
        collapsed = FALSE,
        sidebarLayout(
            sidebarPanel(textOutput("someinputs")),
            mainPanel(textOutput("someoutputs")))
    )%>% {.$attribs[['id']] <- 'example-box'; .},
    tags$head(tags$script(
        "$(document).ready(function(){
          $('#example-box button').attr({
            'data-toggle':'collapse', 
            'data-target':'#example-box .box-body', 
            'aria-expanded':false
          })
        })"
    ))
)

我使用 hack 为盒子 %>% {.$attribs[['id']] <- 'example-box'; .} 分配了一个 ID，并使用一些 jquery 来控制按钮。确保脚本中的 ID 与您在 UI 中分配的 ID 匹配，在本例中为 example-box。在javascript中，你添加#进行ID搜索，所以#example-box.

不建议你使用第二种方式。你可以在你的 UI 中看到，它并不是一个真正的盒子。它没有边框，按钮不在正确的位置。如果你使用dashboardPage，你可以看到区别。

如何最小化 Shiny App 中的 sidebarLayout？

How to minimize a sidebarLayout in a Shiny App?

shiny

shinyjs