Shinydashboard：与侧边栏一起折叠 main-header-title

Question

我目前正在使用 R 包 shinydashboard（基于 AdminLTE）开发仪表板。我想通过按下切换按钮 (3) as seen here 来切换主 header 标题 (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 允许您部分折叠边栏和 header。只需将 dashboardPage 更改为 dashboardPagePlus 并将 dashboardHeader 更改为 dashboardHeaderPlus。保持一切不变，您也可以折叠 header。

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

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

server <- function(input, output) { }

shinyApp(ui, server)

但是，它不会完全折叠 header 和边栏。它留下一些 space 来显示图标，这很有用。但是如果你想完全折叠 header 和侧边栏你需要使用 JavaScript。旁注：dashboardPagePlus 有一个参数 collapse_sidebar，当设置为 TRUE 时将完全折叠边栏，但是，header 保留在原位。要完全移动两者，请使用下面的代码。

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)

Shinydashboard：与侧边栏一起折叠 main-header-title

Shinydashboard: collapse main-header-title together with sidebar

html

r

shiny

shinydashboard

adminlte