45

所以只是好奇，有没有办法在 ShinyDashboard 的标题中添加公司徽标？当我查看文档时，它描述了更改 CSS 中的“徽标”，这只是配置左上角的内容，但据我所知，我想保留我的标题。

我没有使用下拉菜单，所以我想在右上角红色框所在的位置添加我的公司徽标。

在此处输入图像描述

有谁知道如何用 Shinydashboard 做到这一点？谢谢。

2020 年 10 月 27 日更新

对于熟悉 HTML 或希望用户界面更灵活并可以访问前端开发人员的用户，我最近发现您可以使用 HTML 来构建整个用户界面。这里有一篇关于它的闪亮文章。如果需要，这将允许以符合您公司标准的方式完成整个品牌和布局。希望这可以帮助。

4

2 回答 2

58

为此，我一直在研究一些技巧，（我知道你没有要求它，但这是一个可点击的徽标，而我们正在使用它）：

library(shiny)
library(shinydashboard)

dbHeader <- dashboardHeader()
dbHeader$children[[2]]$children <-  tags$a(href='http://mycompanyishere.com',
                                           tags$img(src='logo.png',height='60',width='200'))

dashboardPage(
       dbHeader,
       dashboardSidebar(),
       dashboardBody()
)

所以这在标题中嵌套了一个 shiny.tag 。这个特殊闪亮对象中的第二个插槽是徽标插槽（您需要在应用目录的 /www/ 文件夹中添加一个“logo.png”）

编辑：

我刚刚检查过，从现在开始，应该不再需要这种 hack，您可以通过title=参数直接从 dashboardHeader 函数插入 html，（之前，该参数仅强制文本），

我认为答案可能仍然是一种有用的方法来修改现有的闪亮功能，其中的东西是硬编码的。

这是现在的方法：

dashboardPage(
    dashboardHeader(title = tags$a(href='http://mycompanyishere.com',
                                    tags$img(src='logo.png')))

或者，为徽标添加更多魔力（我还使用我的徽标作为加载栏）：

# Takes a location 'href', an image location 'src', a loading gif 'loadingsrc'
# height, width and alt text, and produces a loading logo that activates while
# Shiny is busy
loadingLogo <- function(href, src, loadingsrc, height = NULL, width = NULL, alt = NULL) {
  tagList(
    tags$head(
      tags$script(
        "setInterval(function(){
                     if ($('html').attr('class')=='shiny-busy') {
                     $('div.busy').show();
                     $('div.notbusy').hide();
                     } else {
                     $('div.busy').hide();
                     $('div.notbusy').show();
           }
         },100)")
  ),
  tags$a(href=href,
         div(class = "busy",  
             img(src=loadingsrc,height = height, width = width, alt = alt)),
         div(class = 'notbusy',
             img(src = src, height = height, width = width, alt = alt))
   )
  )
}

dashboardBody(
  dashboardHeader(title = loadingLogo('http://mycompanyishere.com',
                                      'logo.png',
                                      'loader.gif'),
  dashboardSidebar(),
  dashboardBody()
)
于 2015-09-29T21:52:31.480 回答
42

这是我的技巧（如前所述，将您的徽标放入www应用程序目录的子目录中）。
因为需要一个 type和 classdashboardHeader()的标签元素，我们可以传递这样的元素而不是s：lidropdowndropdownMenu

library(shiny)
library(shinydashboard)

dbHeader <- dashboardHeader(title = "My Dashboard",
                            tags$li(a(href = 'http://shinyapps.company.com',
                                      icon("power-off"),
                                      title = "Back to Apps Home"),
                                    class = "dropdown"),
                            tags$li(a(href = 'http://www.company.com',
                                      img(src = 'company_logo.png',
                                          title = "Company Home", height = "30px"),
                                      style = "padding-top:10px; padding-bottom:10px;"),
                                    class = "dropdown"))

server <- function(input, output) {}

shinyApp(
    ui = dashboardPage(
        dbHeader,
        dashboardSidebar(),
        dashboardBody()
    ),
    server = server
)
于 2016-12-14T14:55:27.757 回答