So implementieren Sie CSS von W3 zu Shiny-Anwendung

Question

Ich habe versucht, CSS von W3 für meine Shiny App zu verwenden. Basierend auf ihren Code

<div class="w3-display-container w3-text-white"> 
    <img src="img_lights.jpg" alt="Lights" style="width:100%"> 
    <div class="w3-display-middle">Middle</div> 
</div> 

I definiert style.css in UI

# style.css 
.w3-display-container { 
    position:relative 
} 

.w3-display-middle { 
    position:absolute; 
    top:50%;left:50%; 
    transform:translate(-50%,-50%); 
    -ms-transform:translate(-50%,-50%); 
} 

.w3-text-white:hover{color:#fff} 

shinyUI(fluidPage(theme = shinytheme("flatly"), 
    navbarPage("", 
    tabPanel("Home", 
     fluidRow(column(12, 
      tags$div(class = ".w3-display-container", 
       img(src = "homepage9.jpg",width="100%", height = 400, 
        tags$div(class= ".w3-display-middle", p("Data")))))))))) 

Ich weiß nicht, wie Tags $ div korrekt zu verwenden, wenn es so viele div in div sind.

Answer 1

Hoffe ich bekomme das Szenario richtig: Sie haben eine Datei style.css und eine andere Datei wie app.R mit Ihrer tatsächlichen Anwendung. Sie möchten den Stil einbetten und den HTML-Code ganz oben emulieren.

Ich sehe zwei Punkte, die Sie könnten hier helfen:

1.) Sie auf den Stil verbinden - vielleicht durch einen link Tag einschließlich auf sie zeigen (oder eine style-Tag mit dem Stil Inline-Erstellung - I fang mit dem letzteren an. Der folgende Code ist ein wenig auf der Nase, aber es funktioniert:

shinyApp(ui=verticalLayout(tag("style", "body {background: pink; }")), server=function(input, output){}) 

2.) Ich glaube, Sie einen Fehler in der HTML haben: img keine Kinder haben, so dass Sie vielleicht den letzten Teil neu schreiben wollen von Ihrem Code so:

ags$div(class = ".w3-display-container", 
    img(src = "homepage9.jpg",width="100%", height = 400), 
    tags$div(class= ".w3-display-middle", p("Data"))