将公司徽标添加到 ShinyDashboard header

Question

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

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

有谁知道如何使用 Shinydashboard 完成此操作？谢谢

更新2020-10-27

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

Answer 1

我一直在为此做一些技巧，（我知道你没有要求，但我们正在做的时候这里有一个可点击的标志）：

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()
)

所以这在 header 中嵌套了一个 shiny.tag。这个闪亮的 object 中的第二个插槽是徽标插槽（您需要在应用程序目录的 /www/ 文件夹中有一个 'logo.png'）

编辑：

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

我认为答案作为一种修改现有闪亮函数的方法可能仍然有用，其中 ARE 是硬编码的。

现在的方法是：

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()
)

Answer 2

这是我的技巧（如前所述，将您的徽标放入应用程序目录的 www 子目录中）。
因为 dashboardHeader() 需要类型为 li 和 class dropdown 的标记元素，我们可以传递此类元素而不是 dropdownMenus:

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
)

将公司徽标添加到 ShinyDashboard header

Adding a company Logo to ShinyDashboard header

r

shiny

shinydashboard