隐藏并显示侧边栏面板闪亮

Question

我的闪亮app在mainPanel中有3个tabPanel，每个tabPanel都有自己的sidebarPanel。我使用shinyBS来设置sidebarPanel“显示和隐藏”

bsButton("showpanel", "Show/Hide sidebar",icon = icon("toggle-off"), type = "toggle",style = "info", value = TRUE)

在服务器中

observeEvent(input$showpanel, {
     if(input$showpanel == TRUE) {
      removeCssClass("Main", "col-sm-12")
      addCssClass("Main", "col-sm-8")
      shinyjs::show(id = "Sidebar")
      shinyjs::enable(id = "Sidebar")
    }
    else {
      removeCssClass("Main", "col-sm-8")
      addCssClass("Main", "col-sm-12")
      shinyjs::hide(id = "Sidebar")
    }
  })

我测试了几次，2个标签像我预期的那样工作，但带有图表的标签（我使用情节），它看起来隐藏侧边栏但是图表不会自动伸展，直到我点击其他标签然后返回Plot标签。因此，如果我想要全屏查看图表，我需要通过单击另一个选项卡进行额外操作，然后返回。

我该如何解决这个问题？

谢谢

Answer 1

下次请发布reproducible example ...

library(shiny)
library(shinydashboard)
library(plotly)
library(shinyjs)
library(shinyBS)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    useShinyjs(),
    extendShinyjs(text = 'shinyjs.hideSidebar = function(params) { $("body").addClass("sidebar-collapse"); 
              $(window).trigger("resize"); }'),
    extendShinyjs(text='shinyjs.showSidebar = function(params) { $("body").removeClass("sidebar-collapse"); 
                  $(window).trigger("resize"); }'),
    bsButton("showpanel", "Show/Hide sidebar",icon = icon("toggle-off"), type = "toggle",style = "info", value = TRUE),
    fluidRow(tabsetPanel(id='tabs',
                         tabPanel(value=1,title="Tab1"),
                         tabPanel(value=2,title="Tab2"),
                         tabPanel(value=3, title="Plot",
                                  fluidRow(
                                    column(12,
                                           plotlyOutput('plot', height=800))))
    )
    )))


server <- function(input, output, session) { 


  output$plot <- renderPlotly({
    plot_ly(data = iris, x = ~Sepal.Length, y = ~Petal.Length)
  })

  observe({
    if(input$showpanel == TRUE) {
      js$showSidebar()
    }
    else {
      js$hideSidebar()
    }
  })
}

shinyApp(ui, server)

一种方法是在添加/删除侧边栏时触发窗口调整大小事件，以便在显示/隐藏侧边栏后强制以正确的大小重绘绘图。为此我用过：

useShinyjs(),
    extendShinyjs(text = 'shinyjs.hideSidebar = function(params) { $("body").addClass("sidebar-collapse"); 
              $(window).trigger("resize"); }'),
    extendShinyjs(text='shinyjs.showSidebar = function(params) { $("body").removeClass("sidebar-collapse"); 
                  $(window).trigger("resize"); }')

功能。