css - 如何将 css 从 w3 实现到 Shiny Application

Question

我尝试将 w3 中的 css 用于我的 Shiny 应用程序。基于他们的代码

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

我在 UI 中定义了 style.css

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

如果div中有那么多div，我不知道如何正确使用tags$div。

Answer 1

希望我的场景是正确的:您有一个文件 style.css 和另一个文件，如 app.R 与您的实际应用程序。您想要嵌入样式并在最顶部模拟 HTML。

我看到两点可能对您有帮助:

1.) 你必须链接到样式 - 也许通过包含一个指向它的 link 标签(或创建一个带有内联样式的 style 标签 - 我' d 从后者开始)。下面的代码有点麻烦，但它有效:

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

2.) 我认为您在 HTML 中有一个错误:img 没有子项，因此您可能需要像这样重写代码的最后一部分:

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