将公司徽标添加到ShinyDashboard页眉 [英] Adding a company Logo to ShinyDashboard header

问题描述

我很好奇，有没有办法将公司徽标添加到ShinyDashboard的标题中？当我查看documentation时，它描述了在CSS中更改&q；徽标&q；，这只是配置左上角的内容，但据我所知，我希望将标题保留在那里。

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

有人知道如何使用Shinydashboard做到这一点吗？谢谢。

更新2020-10-27

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

推荐答案

我一直在处理这个问题(我知道您没有要求它，但我们在这里有一个可点击的徽标)：

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。这个特殊闪亮对象中的第二个槽是徽标槽(在app目录的/www/文件夹中需要一个‘logo.png’)

编辑：

我刚刚检查过了，到目前为止，这个攻击应该不再是必要的，您可以通过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()
)

这篇关于将公司徽标添加到ShinyDashboard页眉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！