Hinzufügen von Hintergrundbild zu bestimmten TabPanel in Shiny

Question

Ich benutze eine NavbarPage in meiner glänzenden Anwendung. Es erlaubt, 2 Tab-Panels zu erstellen. Ich möchte NUR den Hintergrund des ersten Tabpanels anpassen.

Die beste Option, die ich gefunden habe, besteht darin, einen bestimmten Stil ("my_style_1") mit dem Tag-Argument zu erstellen. Und wenden Sie es dann nur auf Tableiste 1 an. Mein Ui.R Code sieht wie folgt aus:

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" 
       )) 
      )) 

Und die grundlegendste server.R können Sie tun:

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

Es ist fast arbeiten, wie Sie here sehen können. Aber das Bild deckt nur den Bereich von "Spalte" ab, es ist kein echter Hintergrund.

Wenn ich den gleichen Hintergrund zu jedem tabPanels anwenden wollte, könnte ich tun, nur

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

Und ich würde dieses gute Ergebnis: here

Vielen Dank für Ihre Hilfe!

Answer 1

Das ist ein bisschen hacky, aber es könnte funktionieren:

• das Thema mit etwas Platz zwischen dem navbar und der Registerkarte Inhalt zu beheben, Sie .my_style_1 { margin-top: -20px; } hinzufügen könnte (da der navbar hat eine Rand- unten von 20px)

• um das Bild die gesamte Breite abdecken, ist das erste, was Sie tun müssen, ist das Bild volle Breite, so fügen Sie .my_style_1 { width: 100%; }. Dann müssen Sie die linke und rechte Polsterung des übergeordneten Container-Flüssigkeit loswerden, so gibt es zwei einfache Möglichkeiten dafür (möglicherweise viel mehr): entweder tun .container-fluid { padding-left: 0; padding-right: 0; }, aber dann müssen Sie auch daran erinnern, das wird einige Polsterung von allen entfernen andere Registerkarten, so dass Sie manuell eine Auffüllung zu den anderen Registerkarten hinzufügen können. Oder Sie könnten .my_style_1 { position: absolute; left: 0; tun. Sehen Sie, welche besser für Sie funktioniert