重新设计了半折叠式侧边栏-R闪亮的仪表板 [英] Semi-collapsed sidebar re-designed - R shiny dashboardplus

问题描述

尝试使用Shiny仪表盘加半折叠侧边栏，但遇到了一些问题，希望您能为您提供建议.

Trying to make use of the Shiny dashboardplus semi-collapse sidebar, but run into some issues and would appreciate your advice.

可复制的脚本:

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


# UI Page Starts
ui = dashboardPagePlus(

  title = "Shiny App",

  dashboardHeader(
    title = "Title with A Few Other Things",
    titleWidth = 530
  ),

  dashboardSidebar(
    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("toggleSidebar", icon("th"), style = "padding-top: 12px;")
      )
    ),

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

    fluidRow(
      h4(HTML(paste0("Contents that are not supposed to show when collapsed.")))
    )
  ),

  dashboardBody()
)



#Server
server = function(input, output, session) {
  #side bar  
  observeEvent(input$toggleSidebar, {
    shinyjs::toggleClass(selector = "body", class = "sidebar-collapse")
  })
}

#
shinyApp(ui = ui, server = server)

在此示例中，我删除了默认的dashboardplus切换-侧边栏按钮，并在侧边栏右上角添加了一个新按钮.(值得注意的是，即使我使用了默认值，也最终会遇到同样的问题)单击折叠侧边栏时，侧边栏本身会像预期的那样半折叠.但是，我也想

In this example, I removed the default dashboardplus toggle-sidebar button, and added a new one to the sidebar top right. (Of note, even I use the default one, it ends up to be the same issue) When click to collapse the sidebar, the sidebar itself semi-collapse as expected. However, I would like to also

1. 半折叠时，请清除边栏中的项目.
2. 将项目列表"垂直添加到半折叠的侧边栏中.
3. 将标题保留为原样，而不会折叠

在下面，我首先显示现在的状态以及我想要的状态.提前非常感谢您的帮助！

Below I am showing first what it is right now and what I want it to be. Thanks so much in advance for your help!

推荐答案

这不是您所有问题的完整答案，但至少是解决徽标/标题问题的部分答案.

This is not a complete answer to all of your questions, but at least a partial one to solve the logo/title issue.

我在此项目的CSS上做了很多研究(我的应用程序也碰巧需要它)，并在CSS中找到了解决方案.

I did a lot of digging through the CSS of this item (i also happened to need this for my application), and found a solution in CSS.

230px 是徽标跨度的默认宽度，但您的徽标跨度似乎更长，因此您可能必须使用徽标跨度的宽度来更改 230px 的所有出现(您应该可以通过使用inspect元素并将其悬停在上面来找到它)

The 230px is the default width of the logo span, but yours seems longer, so you might have to change all occurences of 230px with the width of your logo span (you should be able to find this by using inspect element and hovering over it)

@media (min-width: 768px) {
  .sidebar-mini.sidebar-collapse .main-header .logo {
    width: 230px;
  }
}
@media (min-width: 768px) {
  .sidebar-mini.sidebar-collapse .main-header .navbar {
    margin-left: 0;
  }
}

@media (min-width: 768px) {
  .main-header .navbar {
    margin-left: 230px !important;
  }
}

@media (max-width: 767px) {
  .main-header .logo, .main-header .navbar {
    width: 100% !important;
    float: none;
  }
}

.main-header .logo {
  width: 230px;
}

如果您不知道如何在闪亮的应用程序中获取CSS文件，则可以添加

If you don't know how to source a CSS file in your shiny app, you can add

tags$head(
  includeCSS("styles.css")
)

(其中 styles.css 是包含此代码的CSS文件)到初始标签的 fluidPage()顶部(或呈现页面的任何内容)

(where styles.css is your CSS file including this code) to the top of your initial tab's fluidPage() (or whatever it is you render the page)

这篇关于重新设计了半折叠式侧边栏-R闪亮的仪表板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！