在 R Shiny 的 navbarPage() 布局中将图像放在导航栏的右端

Question

我希望复制与 RStudio 的 SuperZip Shiny 仪表板类似的布局：https://shiny.rstudio.com/gallery/superzip-example.html

该应用的代码可在此处获得：https://github.com/rstudio/shiny-examples/tree/master/063-superzip-example

基于该代码，我想在导航栏的右端添加一个图像（比如 Rstudio 徽标），在下图中用红色框突出显示。我假设我需要添加一些 HTML 和 CSS 代码，但我不确定如何继续。

我的问题和这个问题类似：How can I insert an image into the navbar on a shiny navbarPage()

但是，请注意，答案提供了将图像放在导航栏左端的指示。我要求把它放在导航栏的右端。

Answer 1

链接的解决方案可能不适用于将徽标放在右侧。我建议使用一些JavaScript 代码到append 到navbar 的标志。

解决方案：

1. 创建JS 文件（我将我的文件命名为code.js）

当应用程序完成加载后，它会将徽标附加到导航栏。 （图片右对齐）

$( document ).ready(function() {
  $( ".navbar .container-fluid" ).append( '<img src="logo.png" align="right">' );
});

1. 将徽标（在我的情况下为 logo.png）和 JS 文件放在 www 文件夹中。

2. 在tags$head中包含js文件

您需要将tagList 与navbarPage 一起使用，否则导航栏上会出现一个可点击的“幽灵”标签。

ui <- tagList(
  tags$head(tags$script(type="text/javascript", src = "code.js")),
  navbarPage(title = "Right aligned logo",
             tabPanel("tab1"),
             tabPanel("tab2")
  )
)

Answer 2

我在其他地方得到了一些帮助，我将其发布在这里：

在ui.R代码中：

navbarPage(
  title = div(
    div(
      id = "img-id",
      img(src = "path/to/img.png")
    ),
    "Superzip"
  ),

  # Insert rest of ui code

在styles.css 脚本中：

#img-id{
  position: fixed;
  right: 10px;
  top: 5px;
}