Question

我使用navbarPage()布局构建了一个闪亮的应用程序。我想在导航栏中插入一个位于屏幕右侧的图像。它看起来像是顶部的导航栏，例如stackoverflow站点，但在最右边有一个徽标。我试过了：

shinyUI(
   navbarPage (title="test Page" ,
      img(src="mylogo.gif", style="float:right; padding-right:25px"),
      tabPanel(title="Panel 1",...)
 ))

但是，所有这一切都是在导航栏下方最右侧显示图像，而不是第一个选项卡的内容（注意 - 图像位于www目录中。

我可以使用icon=参数，但是将图标放在浏览器的选项卡上。

关于如何将图像放在导航栏上的任何想法？

Answer 1

我现在可以回答这个问题，至少是闪亮的0.10.0。一般的想法是将title=设置为包含图像和标题文本的div()。

然而，这会产生一个新问题，即icon=参数不再起作用，并且您无法为窗口设置标题。为了解决这个问题，我遵循了Andy Singleton的建议here。建议在fluidPage()之上创建一个navbarPage()，用于保存窗口标题和图标。通过使此页面高度为0像素，它将隐藏在应用程序中。这是代码的关键部分。

ui.r：

shnyUI(
  fluidPage(
     list(tags$head(HTML('<link rel="icon", href="MyIcon.png", 
                                   type="image/png" />'))),
     div(style="padding: 1px 0px; width: '100%'",
         titlePanel(
                title="", windowTitle="My Window Title"
         )
      ),
      navbarPage(
         title=div(img(src="myLogo.gif"), "My Title in the Navbar"),
         tabPanel(....

Answer 2

这是基于@John Paul的answer，但对我来说似乎更简单。首先将页面标题放在变量中，因为我们将使用它两次 - 作为窗口标题和我们的页面：

PAGE_TITLE <- "My great title"

下面的流体页面：

  titlePanel(windowTitle = PAGE_TITLE,
             title =
               div(
                 img(
                   src = "my_logo.png",
                   height = 100,
                   width = 100,
                   style = "margin:10px 10px"
                 ),
                 PAGE_TITLE
               )
             ),

Answer 3

对于导航栏中具有多个图像的那些人，title=仅适用于其中一幅图像，除非您喜欢可怕的格式。

下面的代码允许用户在标头上附加一个新图像，该图像也具有超链接。我用它来创建GitHub徽标并链接我的存储库。

# Create Right Side Logo/Image with Link       
tags$script(HTML("var header = $('.navbar > .container-fluid');
header.append('<div style=\"float:right\"><ahref=\"URL\"><img src=\"Logo.png\" alt=\"alt\" style=\"float:right;width:33px;height:41px;padding-top:10px;\"> </a>`</div>');
    console.log(header)")
    ),

header.append至</a></div>');到R中只需一行代码

我们要做的就是将这段代码标记为HTML脚本，因此所有内容都作为字符串传递给R，并作为HTML代码读取。幸运的是，我们可以更改图片的大小，并使用padding-left,right,top,bottom: _px移动图片。

请注意，container-fluid是我的导航栏，但对于您的应用可能会有所不同。其他样式设置选项可以包含在代码的样式部分中。

请注意，您也可以添加文本并以这种方式链接它。

# Create Right Side Text
 tags$script(HTML("var header = $('.navbar > .container-fluid');
 header.append('<div style=\"float:right\"><h3>Follow us on GitHub</h3></div>');
 )),

再次确保header.append至</div>');在R中的同一行代码中

Answer 4

这是我根据以前的好答案做出的解决方案：

 ui <- 
   fluidPage(  
       list(
         tags$head(
           HTML('<link rel="icon" href="favicon.png" 
                type="image/png" />'))),

    navbarPage("App user name", windowTitle = "App name",
    ...

保存图像的地方是＆＃34; www＆＃34; Shiny app服务器上的文件夹：

shinyApp/app.R
shinyApp/www/favicon.png

如何在闪亮的navbarPage（）上将图像插入导航栏

4 个答案: