时间戳

首页 > 解决方案 > 在shinydashboard中选择特定选项卡时，默认隐藏左右侧边栏

r - 在shinydashboard中选择特定选项卡时，默认隐藏左右侧边栏

问题描述

我在下面有一个闪亮的仪表板，我想知道是否有办法在选择特定选项卡时默认隐藏左侧和右侧边栏。在这种情况下，选项卡'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)

标签： rshinyshinydashboard

解决方案

按shinyjs. 看我怎么做addClass removeClass，看看。

当您在“正面”并在“数据”选项卡上打开时，左右栏关闭。

        ## 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，但这会很棘手。
  • 我添加了一些javascriptrunjs来偷偷隐藏右侧菜单并在“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)

推荐阅读