創建有條件的可見側邊欄閃亮

Question

在R和shiny，我想使用shinydashboard中的選項卡。儀表板通常有一個側欄，但對於一個標籤，我希望側邊欄消失以給頁面主體提供更多的屏幕空間。

我知道有條件面板，但是當選項卡被激活時是否可以調整邊欄的可見性？

下面是一些模擬代碼，用於設置包含三個選項卡和側邊欄的shinydashboard。

library(shiny) 
library(shinydashboard) 

ui <- dashboardPage(
    dashboardHeader(), 
    # I would like to make the sidebar not visible if the third tab is selected... 
    # something like... 
    #if(input.tabs==3){dashboardSidebar(disable = TRUE)}else{dashboardSidebar()}, 
    dashboardSidebar(), 
    if(input.tabs==3){dashboardSidebar(disable = TRUE)}else{dashboardSidebar()}, 
    dashboardBody(
     fluidRow(
     column(width=12, 
       tabsetPanel(id='tabs' 
       tabPanel('tab1', 
          plotOutput('plot1'),value=1), 
       tabPanel('tab2', 
          plotOutput('plot2'),value=2), 
       tabPanel('tab3', 
          plotOutput('plot3'),value=3) 
       ) 
     )) 
    ) 
) 

server <- function(input, output) { 
    output$plot1 <- renderPlot({ 
    out <- ggplot(data.frame(X1=rnorm(1000)),aes(X1))+ 
     geom_density(fill='light blue')+ 
     theme_minimal() 
    print(out) 
    }) 
    output$plot2 <- renderPlot({ 
    out <- ggplot(data.frame(X1=rnorm(1000)),aes(X1))+ 
     geom_density(fill='light blue')+ 
     theme_minimal() 
     print(out) 
    }) 
    output$plot3 <- renderPlot({ 
    out <- ggplot(data.frame(X1=rnorm(1000)),aes(X1))+ 
     geom_density(fill='light blue')+ 
     theme_minimal() 
     print(out) 
    }) 
} 

shinyApp(ui, server) 

Answer 1

我從來沒有使用的儀表盤，直到5分鐘前，當我看到這個問題，所以這可能不是最好的答案，但它的工作原理。

它看起來像當你手動「隱藏」邊欄時，body標籤會得到一個「sidebar-collapse」類。所以我的解決方案是添加javascript，當選擇第三個選項卡時，該類將該類添加到body標籤。一個缺點是，當選擇另一個選項卡時，邊欄不會重新展開，它將保持隱藏狀態，直到您再次手動展開爲止。

免責聲明：在我的答案中，我使用我寫的包，shinyjs。

這裏是閃亮的應用：

library(shiny) 
library(shinydashboard) 
library(ggplot2) 
library(shinyjs) 

ui <- dashboardPage(
    dashboardHeader(), 
    dashboardSidebar(), 
    dashboardBody(
    useShinyjs(), 
    extendShinyjs("app.js"), 
    fluidRow(
     column(width=12, 
      tabsetPanel(id='tabs', 
         tabPanel('tab1', 
            plotOutput('plot1'),value=1), 
         tabPanel('tab2', 
            plotOutput('plot2'),value=2), 
         tabPanel('tab3', 
            plotOutput('plot3'),value=3) 
      ) 
    )) 
) 
) 

server <- function(input, output, session) { 
    output$plot1 <- renderPlot({ 
    out <- ggplot(data.frame(X1=rnorm(1000)),aes(X1))+ 
     geom_density(fill='light blue')+ 
     theme_minimal() 
    print(out) 
    }) 
    output$plot2 <- renderPlot({ 
    out <- ggplot(data.frame(X1=rnorm(1000)),aes(X1))+ 
     geom_density(fill='light blue')+ 
     theme_minimal() 
    print(out) 
    }) 
    output$plot3 <- renderPlot({ 
    out <- ggplot(data.frame(X1=rnorm(1000)),aes(X1))+ 
     geom_density(fill='light blue')+ 
     theme_minimal() 
    print(out) 
    }) 

    observe({ 
    if (input$tabs == 3) { 
     js$hideSidebar() 
    } 
    }) 
} 

shinyApp(ui, server) 

我只加了幾行到您的應用程序：我在UI添加調用useShinyjs()和extendShinyjs("app.js")，我加入observe({ if (input$tabs == 3) js$hideSidebar() })到服務器。我還將session參數添加到服務器功能中。您還需要添加一個名爲「app.js」的JavaScript文件包含此行：

shinyjs.hideSidebar = function(params) { $("body").addClass("sidebar-collapse") } 

您也能避免使用shinyjs和使用有光澤的正常消息傳遞調用一個類似的JavaScript函數。

編輯：與最新shinyjs版本0.0.6.1如果您更喜歡內嵌JavaScript代碼，則不需要使用單獨的文件。只需更換呼叫extendShinyjs("app.js")到

extendShinyjs(text = 'shinyjs.hideSidebar = function(params) { $("body").addClass("sidebar-collapse") }')