r - 如何在 Shinydashboard R 的仪表板标题中心放置图像？

Question

我有以下代码可以制作一个简单 Shiny 的应用程序。

```
library(shinydashboard)
library(shiny)
ui <- dashboardPage(
  dashboardHeader(title = tags$img(src='https://cdn.vox-cdn.com/thumbor/Ous3VQj1sn4tvb3H13rIu8eGoZs=/0x0:2012x1341/1400x788/filters:focal(0x0:2012x1341):format(jpeg)/cdn.vox-cdn.com/uploads/chorus_image/image/47070706/google2.0.0.jpg', height = '60', width ='100')),
  dashboardSidebar(
    sidebarMenuOutput("menu")
  ),
  dashboardBody()
)

server <- function(input, output) {
  output$menu <- renderMenu({
    sidebarMenu(
      menuItem("Overview", icon = icon("tachometer"))
      
    )
  })
}
shinyApp(ui, server)
```

图像输出到右侧菜单的顶部，但我的目标是让图像更多地位于仪表板的中间。我知道菜单会稍微移动 navabr，但我希望它尽可能居中。

但我想要的输出是这样的。我用油漆做了一个 sample 。是否还有一些文本，或者如果可以发布引用，我可以在其中了解有关仪表板标题功能的更多信息，我将不胜感激。

Answer 1

给你

无法使用 shinydashboard 中的函数将图像添加到右侧的标题部分，但让我们通过注入(inject)来享受最新的 htmltools样式和标签到标题中。

library(shinydashboard)
library(shiny)
header_img <- tags$img(
    src='https://cdn.vox-cdn.com/thumbor/Ous3VQj1sn4tvb3H13rIu8eGoZs=/0x0:2012x1341/1400x788/filters:focal(0x0:2012x1341):format(jpeg)/cdn.vox-cdn.com/uploads/chorus_image/image/47070706/google2.0.0.jpg',
    style = 'height: 50px; width: 100px; position: absolute; left: 50%; transform: translateX(-50%);'
)
header <-  htmltools::tagQuery(dashboardHeader(title = ""))
header <- header$
    addAttrs(style = "position: relative")$ # add some styles to the header 
    find(".navbar.navbar-static-top")$ # find the header right side
    append(header_img)$ # inject our img
    allTags()

ui <- dashboardPage(
    header,
    dashboardSidebar(
        sidebarMenuOutput("menu")
    ),
    dashboardBody()
)

server <- function(input, output) {
    output$menu <- renderMenu({
        sidebarMenu(
            menuItem("Overview", icon = icon("tachometer"))
            
        )
    })
}
shinyApp(ui, server)

img 位于右侧标题的中心，而不是整个标题长度的中心。如果你想调整到整个长度的中心，试着把img的translateX(-50%)改成你喜欢的数字。