Shinydashboard: свернуть заголовок основного заголовка вместе с боковой панелью - PullRequest
Новая
       29

Shinydashboard: свернуть заголовок основного заголовка вместе с боковой панелью

1 голос
/ 08 апреля 2020

В настоящее время я работаю над панелью инструментов с Shinydashboard пакета R (на основе AdminLTE). Я хотел бы переключать заголовок основного заголовка (2) вместе с боковой панелью (1), нажимая кнопку переключения (3) , как показано здесь .

См. Ниже минимальный фрагмент кода, чтобы проиллюстрировать то, о чем я говорю. 

library(shiny)
library(shinydashboard)

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

server <- function(input, output) { }

shinyApp(ui, server)

Любая помощь очень ценится. Если вы знаете, как решить проблему, отредактировав базовый HTML, это очень приветствуется.

1 Ответ

1 голос
/ 08 апреля 2020

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)

enter image description here

...