Добавление частиц из particles.js в shinydashboard

#r #shiny #shinydashboard #particles.js

#r #блестящий #shinydashboard #particles.js

Вопрос:

Я сталкиваюсь с некоторыми проблемами, включая particles.js вывод (API, предоставленный shinyparticles в 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Ы кажутся идентичными, когда я просматриваю исходный код страницы, но текст для частиц не отображается.

Ответ №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")
  )
)
  

Вывод:
Элемент над частицами