【问题标题】:Hide left and right sidebars by default when specific tab is selected in shinydashboard在shinydashboard中选择特定选项卡时,默认隐藏左右侧边栏
【发布时间】:2020-06-30 01:50:55
【问题描述】:

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

【问题讨论】:

    标签: r shiny shinydashboard


    【解决方案1】:

    通过shinyjs 进行操作。通过addClassremoveClass观看我的表现,看看。

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

            ## 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)
    

    【讨论】:

    • tnx 做到了。
    • 有没有办法同时隐藏“齿轮”图标以及从“正面”完全打开右侧边栏的能力?
    • 很有趣,但我希望这个完全禁用。没有必要将其显示为空并让用户感到困惑。
    • 我不明白这部分。您想要一个删除右侧边栏的按钮吗?
    猜你喜欢
    • 2016-05-12
    • 2020-02-08
    • 1970-01-01
    • 1970-01-01
    • 2018-05-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-01-20
    相关资源
    最近更新 更多