半折叠闪亮的仪表板侧栏,无需使用标题中的给定切换

时间:2019-10-28 23:48:58

标签: javascript css r shiny shinydashboard

尝试向发光的仪表板添加一些个性化设计-而不是使用仪表板标题中的侧栏切换按钮来折叠和展开侧栏,我希望将此控件作为按钮放置在侧栏本身中只做半塌陷。见下文:

enter image description here

我已经达到了顶部(默认的侧边栏切换已禁用,按钮可以完全折叠侧边栏),并且希望在单击按钮时使侧边栏半折叠,如底部所示。

值得注意的是,标题中的侧边栏切换通常如下所示: enter image description here

可复制的代码如下:

library("shiny")
library("htmltools")
library("shinydashboard")
library("shinyjs")

# UI Page Starts
ui = dashboardPage(  
  skin = "black",

  dashboardHeader(
    title = "Title"
  ),


  dashboardSidebar(
    width = 250,
    fluidRow(
      useShinyjs(),
      column(8, align = "left", offset = 0, 
             style='padding-left: 28px;  padding-top: 10px', 
             h4(HTML(paste0("Project Lists")))),
      column(2, align = "left", offset = 0, 
             style='padding-top: 5px',
             actionButton("hideSidebar", icon("th"), style = "padding-top: 12px;")
      )
    ),

    # Remove the sidebar toggle element
    tags$script(JS("document.getElementsByClassName('sidebar-toggle')[0].style.visibility = 'hidden';"))
  ),

  dashboardBody(
    tabBox(
      title = NULL, width = 12,
      id = "tabset1", height = "700px"
    )
  )
)


#Server
server = function(input, output, session) {

  #side bar  
  observeEvent(input$hideSidebar, {
    shinyjs::addClass(selector = "body", class = "sidebar-collapse")
  })
}

#
shinyApp(ui = ui, server = server)

任何建议都值得赞赏。非常感谢你!

0 个答案:

没有答案