r - 在 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 Logo )，在下图中用红色框突出显示。我假设我需要添加一些 HTML 和 CSS 代码，但我不确定如何继续。

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

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

Answer 1

链接的解决方案可能无法将 Logo 放在右侧。我建议使用一些 JavaScript 代码将 Logo append 到 navbar。

解决方案:

1. 创建JS文件(我将我的文件命名为code.js)

应用加载完成后，会将 Logo 附加到导航栏。 (图片右对齐)

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

1. 将 Logo (在我的示例中为 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")
  )
)