如何将图像插入到闪亮的导航栏Page()上的导航栏中

问题描述

我正在使用navbarPage()布局构建一个闪亮的应用程序。我想在导航栏的屏幕右侧插入一个图像。例如，它看起来像堆栈溢出站点顶部的导航栏，但在最右边有一个徽标。我已尝试：

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

但是，所有这些操作都是在导航栏的最右侧显示图像，而不是第一个选项卡的内容(注意-图像根据需要位于www目录中)。

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

您对如何将图像放在导航栏本身有什么想法吗？

推荐答案

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

但是，这会产生一个新问题，因为icon=参数不再起作用，并且您不能为窗口设置标题。为了解决这个问题，我遵循Andy Singleton的建议here，建议在navbarPage()上方创建一个可用于保存窗口标题和图标的fluidPage()。通过使此页面高度为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(....

这篇关于如何将图像插入到闪亮的导航栏Page()上的导航栏中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！