以闪亮的方式隐藏和显示侧边栏面板

Posted 2023-03-24

【中文标题】以闪亮的方式隐藏和显示侧边栏面板

【英文标题】：Hide and show sidebar panel in shiny

【发布时间】：2018-06-02 11:28:39

【问题描述】：

我的闪亮应用在 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 选项卡。因此，如果我想全屏查看绘图，我需要通过单击另一个选项卡进行额外操作，然后返回。

我该如何解决这个问题？

谢谢

【参考方案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"); ')

函数。

【讨论】：

在我尝试您的应用程序时出现此错误：Error: shinyjs: extendShinyjs: 'functions' argument must be provided.

【参考方案2】：

缺少函数参数

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

【讨论】：

你好维克多。我认为您正在回答来自 Mal_a 的 Tarun-Parmar cmets。如果是这样，这里的目的是回答主要问题。您可以对此发表其他评论。

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

这并没有提供问题的答案。一旦你有足够的reputation，你就可以comment on any post；相反，provide answers that don't require clarification from the asker。 - From Review