在 shinydashboard 中添加来自 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")
  )
)

输出：

在 shinydashboard 中添加来自 particles.js 的粒子

Adding particles from particles.js in shinydashboard

r

shiny

shinydashboard

particles.js