Shinydashboard：将主标题标题与侧边栏一起折叠答案

【问题标题】：Shinydashboard: collapse main-header-title together with sidebarShinydashboard：将主标题标题与侧边栏一起折叠
【发布时间】：2020-04-08 10:12:28
【问题描述】：

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

请参阅下面的最小代码 sn-p 来举例说明我在说什么。

library(shiny)
library(shinydashboard)

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

server <- function(input, output) { }

shinyApp(ui, server)

非常感谢任何帮助。如果您知道如何通过编辑底层 HTML 来解决问题，我们也非常欢迎。

【问题讨论】：

标签： html r shiny shinydashboard adminlte

【解决方案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。旁注：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)

【讨论】：

很奇怪。我以为我一周前在这里发表了评论。无论如何：很好的答案，效果很好。非常感谢！干杯。