Как я могу вставить изображение в навигационную панель на блестящей панели навигации()

Я создаю блестящее приложение, используя макет navbarPage(). Я хотел бы вставить изображение в правую сторону экрана в панели навигации. Он будет выглядеть как панель навигации вверху, например, на сайтах stackoverflow, но с логотипом в крайнем правом углу. Я пробовал:

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

Однако все это отображает изображение в правом углу под панелью навигации, а не содержимое первой вкладки (Примечание - изображение находится в каталоге www по мере необходимости).

Я могу использовать аргумент icon=, но это помещает значок на вкладку в браузере.

Любые идеи о том, как поместить изображение на панель навигации?

Ответ 1

Теперь я могу ответить на этот вопрос, по крайней мере, для блестящего 0.10.0. Общая идея состоит в том, чтобы установить title= на div(), который содержит как изображение, так и текст для заголовка.

Однако это создает новую проблему, поскольку аргумент icon= больше не работает, и вы не можете установить заголовок для окна. Чтобы обойти это, я последовал за советом Энди Синглтона здесь. Совет должен создать 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(....

Ответ 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
               )
             ),

Ответ 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

Ответ 4

Вот решение, которое я сделал на основе предыдущих великолепных ответов:

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

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

Место для сохранения изображений - папка "www" на сервере приложений Shiny:

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