从闪亮仪表板中的particles.js添加粒子

Question

我遇到了一些麻烦，包括particles.js输出（shinyparticles中shinydashboard提供的API。我正在与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似乎相同，但是没有出现粒子的可视化。

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

输出：