r - 在 shinydashboard 添加来自particle.js 的粒子

Question

我遇到了一些麻烦，包括particles.js输出（由shinyparticlesin提供的 API shinydashboard。我正在使用R.

以下是适用于的示例shiny

library(shiny)
library(shinyparticles)
    ui <- fluidPage(
           particles(),
           headerPanel("This is a sample app")
          )
    server <- function(input, output, session){}

    shinyApp(ui, server)

这是一个shinydashboard似乎不起作用的

library(shinydashboard)
library(shinyparticles)
shinyApp(
  ui = dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(tags$body(div(particles()))),
    title = "Dashboard example",
    skin = "black"
  ),
  server = function(input, output) { }
)

当我查看页面源代码时，生成的 HTML 看起来是相同的，但粒子的 viz 没有出现。

Answer 1

粒子不会出现，因为它们低于dashboardBody（默认情况下：）z-index: -10。

如果您将z-index粒子的 设置为1它们将是可见的，但是您添加到主体的任何元素都将位于粒子之下。

所以将元素设置z-index为更高的数字。（在这个例子中我只使用盒子）

代码：

dashboardBody(
  tags$head(tags$style("
    .particles-full {
      z-index: 1;
    }
    .box {
      z-index: 2;
    }
  ")),
  particles(),
  box(
    h2("Header"),
    p("Paragraph")
  ),
  box(
    plotOutput("plot")
  )
)

输出：