バックグラウンドイメージをShinyの特定のtabPanelに追加

Question

私は光沢のあるアプリケーションでnavbarPageを使用します。 2つのタブパネルを作成することができます。私は最初のtabpanelの背景のみをカスタムにしたいと思います。

私が見つけた最良の選択肢は、tag引数を持つ特定のスタイル（ "my_style_1"）を作成することです。それをタブパネル1にのみ適用します。マイUi.Rコードは以下のようになります。

library(shiny) 
shinyUI(navbarPage(

    # --- Application name 
    "my application", 

    # --- Creation of a style named my_style_1 
    tags$head(
     tags$style(HTML(".my_style_1{ 
       background-image: url(http://papillondamour.p.a.pic.centerblog.net/fb850229.jpg); 
    }"))), 

    # --- Sheet number 1 wih custom style 
    tabPanel(title="Page1" , 
      column(10, 
       class="my_style_1", 
       br(),br(),br(),h1("A piece of text"),br(),br(),br() 
      )), 

    # --- Sheet number 2 
    tabPanel(title="Page2" , 
      column(10, 
       "Another piece of text" 
       )) 
      )) 

そして、あなたが行うことができ、最も基本的なserver.R：

library(shiny) 
shinyServer(function(input, output) {}) 

あなたがhereを見ることができるようにそれはほとんど働いています。しかし、画像は "列"の領域だけをカバーしています、それは本当の背景ではありません。

私はすべてのtabPanelsに同じ背景を適用したい場合は、私はちょうど

tags$head(
     tags$style(HTML("body{ 
       background-image: url(http://papillondamour.p.a.pic.centerblog.net/fb850229.jpg); 
    }"))), 

を行うことができますそして、私はこの良い結果を得るでしょう：here

はあなたの助けのためにありがとうございました！

Answer 1

これは少しハックですが、それは仕事ができる：

• ナビゲーションバーとタブのコンテンツの間にいくつかのスペースを持っていることの問題を解決するためにナビゲーションバーがmargin-を持っているので、あなたは（.my_style_1 { margin-top: -20px; }を追加することができます画像を全幅にするには、最初に画像を全幅にする必要がありますので、.my_style_1 { width: 100%; }を追加してください。次に、親コンテナ流体の左と右の詰め物を取り除く必要があります。そのためには2つの簡単なオプションがあります（もっと多くの可能性があります）。.container-fluid { padding-left: 0; padding-right: 0; }を実行しますが、すべてのパディングを削除することを覚えておく必要があります他のタブに手作業で追加することができます。または、.my_style_1 { position: absolute; left: 0;を実行することもできます。どちらが良いのかを確認してください