【问题标题】:shinydashboard vs shinydashboardPlus - dashboardsidebar title differencesshinydashboard vs shinydashboardPlus - 仪表板边栏标题差异
【发布时间】:2021-12-04 01:08:04
【问题描述】:

我有一个用 shinydashboard 构建的 Shiny 应用程序,我刚刚发现了 shinydashboardPlus。一个不错的选择是让 sidebarMenu “最小化”,或者在最小化时它不会完全消失,而只是显示每个 menuItem 的图标。但是,使用shinydashboardPlus,在缩小时,标题会被截断。使用 shinydashboard,标题保持不变,但侧边栏完全消失了。

示例代码:

library(shiny)
library(shinydashboard)
#library(shinydashboardPlus)

# Basic dashboard page template
shinyApp(
  ui = dashboardPage(
    dashboardHeader(title = "Example"),
    dashboardSidebar(#minified = TRUE,
      sidebarMenu(
        menuItem('Menu1', tabName = 'Menu1', 
                 icon = icon('folder-open')),
        menuItem('Menu2', tabName = 'Menu2',
                 icon = icon('code-branch'))
      )
    ),
    dashboardBody()
  ),
  server = function(input, output) { }
)

保留注释标记并使用 shinydashboard 运行它,并最初给出:

而当点击汉堡最小化侧边栏时,整个侧边栏消失:

如果注释标记被删除以便它使用 shinydashboardPlus 运行,则将其最小化会给出这个,我在侧边栏中有图标,但标题被切掉了:

有没有办法获得仅显示图标但不删除标题的 shinydashboardPlus 缩小?

【问题讨论】:

  • 你是什么意思“但没有砍掉标题”?根本不显示标题或将标题更改为较小的字体以便它仍然显示它?你明白了,如果你崩溃了,没有足够的空间来显示原文吧?
  • 如果你运行代码,你会看到当你用 shinydashboard 最小化时,标题并没有改变——它没有被截断或剪裁,但仍然显示。但是,当您使用 shinydashboardPlus 最小化时,标题会被剪掉。本质上,右边界遵循其下方导航窗格的最小化。我希望标题在最小化之前保持原样,但它下方的导航窗格缩小为仅显示图标。

标签: r shiny shinydashboard shinydashboardplus


【解决方案1】:

给你

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

# Basic dashboard page template
shinyApp(
  ui = dashboardPage(
    dashboardHeader(title = "Example"),
    dashboardSidebar(#minified = TRUE,
      sidebarMenu(
        menuItem('Menu1', tabName = 'Menu1', 
                 icon = icon('folder-open')),
        menuItem('Menu2', tabName = 'Menu2',
                 icon = icon('code-branch'))
      )
    ),
    dashboardBody(
      tags$style(
        '
        @media (min-width: 768px){
          .sidebar-mini.sidebar-collapse .main-header .logo {
              width: 230px; 
          }
          .sidebar-mini.sidebar-collapse .main-header .navbar {
              margin-left: 230px;
          }
        }
        '
      )
    )
  ),
  server = function(input, output) { }
)

如果您的标题过长,请更改 widthmargin-left 数字。

【讨论】:

  • 完美!我自己永远也想不通。谢谢!!
猜你喜欢
  • 1970-01-01
  • 2021-12-17
  • 2021-09-17
  • 2021-06-22
  • 1970-01-01
  • 2021-07-30
  • 1970-01-01
  • 2017-05-21
  • 2021-09-28
相关资源
最近更新 更多