반짝이는 사이드 바 패널 숨기기 및 표시

Question

내 반짝이는 앱에는 mainPanel에 3 개의 tabPanel이 있으며, 각 tabPanel에는 자체 sidebarPanel이 있습니다. 내가 sidebarPanel 설정 shinyBS을 사용하여 "쇼를하고 숨기기"

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") 
    } 
    }) 

서버

에서

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

을 내가 예상처럼 몇 번, 2 개 탭이 작동 테스트,하지만 플롯과 탭 (나는 plotly 사용) 사이드 바를 숨기고 있지만 다른 탭을 클릭하고 플롯 탭으로 돌아갈 때까지 플롯이 자동 스트레치되지 않습니다. 따라서 전체 화면으로 플롯을보고 싶으면 다른 탭을 클릭하여 추가 작업을 수행해야합니다.

이 문제를 어떻게 해결합니까?

감사

Answer 1

다음 번에이 작업을 수행하는

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) 

한 가지 방법은 당신이/추가 할 수있는 플롯을 강제로 사이드를 제거 할 때 윈도우 이벤트의 크기를 조절 트리거하는 것입니다 reproducible example ... 게시하시기 바랍니다 사이드 바를 표시하거나 숨긴 후에 올바른 크기로 다시 그립니다. 이 목적을 위해 나는 다음을 사용했다 :

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"); }') 

기능.