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

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的建议.建议在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 的回答，但对我来说似乎更简单。首先将您的页面标题放在一个变量中，因为我们将使用它两次——作为窗口标题和我们的页面：

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中的同一行中