Shinydashboard:折叠main-header-title和侧边栏

Question

我目前正在开发一个带有R包shinydashboard (基于AdminLTE)的仪表板。我想通过按下切换按钮(3) as seen here来切换主标题标题(2)和侧边栏(1)。

请看下面的最小代码片段来举例说明我正在谈论的内容。

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(title = "Toggle this!"),
  dashboardSidebar(),
  dashboardBody()
)

server <- function(input, output) { }

shinyApp(ui, server)

任何帮助都是非常感谢的。如果你知道如何通过编辑底层的HTML来解决这个问题，那也是非常受欢迎的。

Answer 1

shinydashboardPlus允许您部分折叠侧边栏和页眉。只需将dashboardPage更改为dashboardPagePlus，将dashboardHeader更改为dashboardHeaderPlus。保留所有内容不变，您也可以折叠标题。

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

ui <- dashboardPagePlus(
  dashboardHeaderPlus(title = "Toggle this!"),
  dashboardSidebar(),
  dashboardBody()
)

server <- function(input, output) { }

shinyApp(ui, server)

但是，它不会完全折叠页眉和侧边栏。它留下了一些空间来显示图标，这是很有用的。但是，如果您想完全折叠标题和侧边栏，则需要使用JavaScript。Sidenote：dashboardPagePlus有一个参数collapse_sidebar，当设置为TRUE时，它将完全折叠侧边栏，但是标题会留在原处。要完全移动这两个组件，请使用以下代码。

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)


jscode <- HTML("
$(document).on('shiny:connected', function(event) {
  $('.sidebar-toggle').on('click', function() {
    if ($('body')[0].className != 'skin-blue sidebar-mini sidebar-collapse') {
      $('#sidebarCollapsed').css('display', 'none')
      $('nav.navbar-static-top').css('width', '1800px')
      $('nav.navbar-static-top').css('margin-left', '0px')
      $('header.main-header').css('width', '1800px')
      $('.sidebar-toggle').css('position', 'relative')
      $('span.logo').css('display', 'none')
    } else {
      $('#sidebarCollapsed').css('display', 'block')
      $('nav.navbar-static-top').css('margin-left', '230px')
      $('header.main-header').css('width', '884.44px')
      $('nav.navbar-static-top').css('width', '1800.44px')
      $('span.logo').css('display', 'block')
    }
  })
});
")

csscode <- HTML("
.sidebar-mini.sidebar-collapse .content-wrapper {
      margin-left: 0px !important;
}")



ui <- dashboardPagePlus(
  dashboardHeaderPlus(title = "Toggle this!"),
  dashboardSidebar(collapsed = TRUE,
                   tags$head(tags$script(jscode)),
                   tags$head(tags$style(csscode))                   
                   ),
  dashboardBody()
)

server <- function(input, output) { }

shinyApp(ui, server)

​

​