闪亮仪表板中永久扩展的手风琴答案

【问题标题】：Permanently expanded accordion in shinydashboard闪亮仪表板中永久扩展的手风琴
【发布时间】：2018-01-26 08:31:12
【问题描述】：

有没有办法将闪亮仪表板菜单设置为永久展开，如下图所示：

由于文档的原因，我知道手风琴菜单的行为是这样的（我的意思是只能同时扩展一个），但也许有一些技巧可以做到这一点，或者在我的闪亮应用中实现一些替代方案？

代码如下：

library(shiny)
library(shinydashboard)

header <- dashboardHeader()

  sidebar <- dashboardSidebar(
    sidebarMenu(
      # Setting id makes input$tabs give the tabName of currently-selected tab
      id = "tabs",
      menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
      menuItem("Widgets", icon = icon("th"), tabName = "widgets",
               menuSubItem("Sub-item 1", tabName = "subitem1"),
               menuSubItem("Sub-item 2", tabName = "subitem2"),
               startExpanded = TRUE),
      menuItem("Charts", icon = icon("bar-chart-o"),
               menuSubItem("Sub-item 3", tabName = "subitem3"),
               menuSubItem("Sub-item 4", tabName = "subitem4"),
               startExpanded = TRUE
      )
    )
  )

  body <- dashboardBody(
    tabItems(
      tabItem("dashboard",
              div(p("Dashboard tab content"))
      ),
      tabItem("widgets",
              "Widgets tab content"
      ),
      tabItem("subitem1",
              "Sub-item 1 tab content"
      ),
      tabItem("subitem2",
              "Sub-item 2 tab content"
      )
    )
  )

  shinyApp(
    ui = dashboardPage(header, sidebar, body),
    server = function(input, output) { }
  )

【问题讨论】：

标签： r shiny accordion shinydashboard

【解决方案1】：

好的，这很 hacky，可能有更好的方法来做到这一点，但您可以使用 CSS 样式将链接移动到其他内容的“下方”，这样就无法使用 z-index 来点击它们。不幸的是，您似乎必须手动编写每个菜单项，并引用其 href。请看这个例子：

library(shiny)
library(shinydashboard)

header <- dashboardHeader()

sidebar <- dashboardSidebar(
  sidebarMenu(
    tags$head(tags$style(HTML('
        a[href="#shiny-tab-widgets"] {
          z-index: -99999;
        }
        a[href="#"] {
          z-index: -99999;
        }
      '))),

    # Setting id makes input$tabs give the tabName of currently-selected tab
    id = "tabs",
    menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
    menuItem("Widgets", icon = icon("th"), tabName = "widgets",
             menuSubItem("Sub-item 1", tabName = "subitem1"),
             menuSubItem("Sub-item 2", tabName = "subitem2"),
             startExpanded = TRUE),
    menuItem("Charts", icon = icon("bar-chart-o"),
             menuSubItem("Sub-item 3", tabName = "subitem3"),
             menuSubItem("Sub-item 4", tabName = "subitem4"),
             startExpanded = TRUE
    )
  )
)

body <- dashboardBody(

  tabItems(
    tabItem("dashboard",
            div(p("Dashboard tab content"))
    ),
    tabItem("widgets",
            "Widgets tab content"
    ),
    tabItem("subitem1",
            "Sub-item 1 tab content"
    ),
    tabItem("subitem2",
            "Sub-item 2 tab content"
    )
  )
)

shinyApp(
  ui = dashboardPage(header, sidebar, body),
  server = function(input, output) { }
)

【讨论】：