web-dev-qa-db-ja.com

光沢のあるnavbarPage（）のnavbarに画像を挿入するにはどうすればよいですか

navbarPage()レイアウトを使用して、光沢のあるアプリケーションを作成しています。画面の右側のナビゲーションバーに画像を挿入したいと思います。たとえば、stackoverflowサイトの上部にあるナビゲーションバーのように見えますが、右端にロゴがあります。私が試してみました：

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

ただし、これは最初のタブのコンテンツではなく、ナビゲーションバーの右下に画像を表示するだけです（注-画像は必要に応じてwwwディレクトリにあります）。

icon=引数ですが、ブラウザのタブにアイコンが表示されます。

ナビゲーションバー自体に画像を配置する方法に関するアイデアはありますか？

rshiny
24
John Paul

これで、少なくとも光沢のある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(....
_
26
John Paul

ナビゲーションバーに複数の画像がある場合、ひどい書式設定が必要でない限り、title=は1つの画像に対してのみ機能します。

以下のコードを使用すると、ハイパーリンクされた新しい画像をヘッダーに追加できます。これを使用して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の1行のコードにする必要があります

コードのこのセクションにHTMLスクリプトとしてタグを付けるだけなので、すべてが文字列としてRに渡され、HTMLコードとして読み取られます。幸い、画像のサイズを変更し、padding-left,right,top,bottom: _pxを使用して画像を移動できます。

container-fluidは私のナビゲーションバーですが、アプリによっては異なる場合があります。コードのスタイル部分に追加の書式設定オプションを含めることができます。

enter image description here

テキストを追加して、この方法でリンクすることもできます。

# 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の同じコード行にあることを確認してください

7
Chabo

これは@John Paulの answer に基づいていますが、私には簡単に思えます。ウィンドウのタイトルとページで2回使用するため、最初にページのタイトルを変数に入れます。

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
               )
             ),
4
PeterVermont

ここに私が以前の素晴らしい答えに基づいて作った解決策があります：

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

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

画像を保存する場所は、Shinyアプリサーバーの「www」フォルダーです。

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