我有以下代码可以制作一个简单的 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)
```
图像输出在右侧菜单的顶部,但我的目标是让图像更多地位于 dashboard 的中间。我知道菜单会稍微改变 navabr,但我想让它尽可能居中。
但我想要的输出是这样的。我用油漆做了一个样品。是否有可能仍然有一些文本,或者是否可以发布参考,我可以在其中了解有关 dashboard 标题功能的更多信息,我将不胜感激。
给你
你无法使用 中的函数将图像添加到右侧的标题部分,但让我们通过在标题中注入样式和标签来享受最新的乐趣。shinydashboard
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%)
如何在标题的左侧添加图像,中间的文本和右侧的图像?
使用
追加
将组件注入标头。向左
或向右
更改 CSS 以使其向左或向右对齐。或者您可以使用Flex
布局,但使用Flex
注入顺序很重要。如果你不熟悉,你可以谷歌这些CSS术语。