在 Shinydashboard 中選擇特定選項卡時，默認隱藏左右側邊欄

Question

我下面有一個閃亮的儀表板，我想知道是否有辦法在選擇特定選項卡時默認隱藏左右側邊欄。 在這種情況下，選項卡'Front'

## app.R ##
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(DT)
library(shinyWidgets)
ui <- tags$body(class="skin-blue sidebar-mini control-sidebar-open",dashboardPagePlus(
  dashboardHeaderPlus(
    enable_rightsidebar = TRUE,
    rightSidebarIcon = "gears",
    fixed = T
  ),
  dashboardSidebar(

  ),
  dashboardBody(
    tags$hr(),
    tabsetPanel(
      id ="tabA",
      type = "tabs",
      tabPanel("Front",icon = icon("accusoft")),
      tabPanel("Data", icon = icon("table")


    )
  )
),
rightsidebar = rightSidebar(

)))

server <- function(input, output) {


}

shinyApp(ui = ui, server = server)

Answer 1

通過shinyjs 。 看看我是怎么做的addClass removeClass ，看看吧。

當您處於“Front”並在“Data”選項卡上打開時，左右欄關閉。

        ## app.R ##
        library(shiny)
        library(shinydashboard)
        library(shinydashboardPlus)
        library(DT)
        library(shinyWidgets)
        library(shinyjs)
        ui <- dashboardPagePlus(
            dashboardHeaderPlus(
                enable_rightsidebar = TRUE,
                rightSidebarIcon = "gears",
                fixed = T
            ),

            dashboardSidebar(
            ),

            dashboardBody(
                useShinyjs(),
                tags$hr(),
                tabsetPanel(
                    id ="tabA",
                    type = "tabs",
                    tabPanel("Front",icon = icon("accusoft")),
                    tabPanel("Data", icon = icon("table")


                    )
                )
            ),
            rightsidebar = rightSidebar(

            )
        )

        server <- function(input, output) {
            observe({
               if (input$tabA == "Front") {
                   addClass(selector = "body", class = "sidebar-collapse")
                   removeClass(selector = "body", class = "control-sidebar-open")
               } else {
                   removeClass(selector = "body", class = "sidebar-collapse")
                   addClass(selector = "body", class = "control-sidebar-open")
               }
            })
        }

        shinyApp(ui = ui, server = server)

要在評論中回答您的其他問題：

• 我檢查了文檔，右側邊欄菜單沒有ID，所以我不能使用閃亮的功能來改變那個，除非你在啟動時改變shinydashboardPlus的源代碼給它一個ID，但這會非常棘手.
• 我添加了一些 javascript runjs來偷偷地隱藏右側菜單並在“Front”上添加一個按鈕。 單擊它時，將顯示右側欄。

## app.R ##
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(DT)
library(shinyWidgets)
library(shinyjs)
ui <- dashboardPagePlus(
    dashboardHeaderPlus(
        enable_rightsidebar = TRUE,
        fixed = T

    ),

    dashboardSidebar(
    ),

    dashboardBody(
        useShinyjs(),
        tags$hr(),
        tabsetPanel(
            id ="tabA",
            type = "tabs",
            tabPanel(title = "Front", icon = icon("accusoft"),
                actionButton(inputId = "openright", label = "Open Right")
                     ),
            tabPanel("Data", icon = icon("table")

            )
        )
    ),
    rightsidebar = rightSidebar(

    )
)

server <- function(input, output) {

    observe({
        runjs('document.querySelectorAll(".navbar-custom-menu")[1].style.visibility = "hidden"')
        if (input$tabA == "Front") {
            addClass(selector = "body", class = "sidebar-collapse")
            removeClass(selector = "body", class = "control-sidebar-open")
        } else {
            removeClass(selector = "body", class = "sidebar-collapse")
            addClass(selector = "body", class = "control-sidebar-open")
        }
    })
    observeEvent(input$openright, {addClass(selector = "body", class = "control-sidebar-open")})
}

shinyApp(ui = ui, server = server)