在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添加到JS。

<强>解决方案：

1. 创建code.js文件（我将文件命名为$( document ).ready(function() { $( ".navbar .container-fluid" ).append( '<img src="logo.png" align="right">' ); }); ）

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

logo.png

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

2. 在tagList

中加入js文件

您需要将navbarPage与ui <- tagList( tags$head(tags$script(type="text/javascript", src = "code.js")), navbarPage(title = "Right aligned logo", tabPanel("tab1"), tabPanel("tab2") ) ) 一起使用，否则可以点击＆＃34;幽灵＆＃34;选项卡将显示在导航栏上。

int main()
{
  CXIndex index = clang_createIndex(0, 0);
  CXTranslationUnit unit = clang_parseTranslationUnit(
    index,
    "parseMe.hpp", nullptr, 0,
    nullptr, 0,
    CXTranslationUnit_None);
  CXCursor cursor = clang_getTranslationUnitCursor(unit);
  Walker::visitNode(cursor);
}

void Walker::visitNode(CXCursor cursor){
    clang_visitChildren(cursor,
    [](CXCursor c, CXCursor parent, CXClientData client_data)
    {
        printf("\nKind: %s\n", clang_getCString(clang_getCursorKindSpelling(clang_getCursorKind(c))));
        printf("Identifier: %s\n", clang_getCString(clang_getCursorSpelling(c)));
        printf("Parent Kind: %s\n", clang_getCString(clang_getCursorKindSpelling(clang_getCursorKind(parent))));
        printf("Parent Identifier: %s\n\n", clang_getCString(clang_getCursorSpelling(parent)));
        return CXChildVisit_Recurse;
    },
    nullptr);
}

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;
}