首页 > 解决方案 > shinydashboardPlus:打开一个封闭的盒子Plus

问题描述

如何打开(使用代码)封闭的 boxPlus?

https://cran.r-project.org/web/packages/shinydashboardPlus/vignettes/improved-boxes.html

标签: rshinydashboard

解决方案


我一直在寻找相同问题的答案,并且我已经想出了如何使用 shinyjs 做到这一点。

library(shinydashboardPlus)
library(shinydashboard)
library(shinyjs)
library(shiny)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    useShinyjs(),
    boxPlus(
      id = "openable-box-plus",
      title = "Openable boxPlus",
      closable = TRUE
    ),
    actionButton(
      inputId = "open-box-plus",
      label = "Open boxPlus"
    )
  )
)

server <- function(input, output) {
  observeEvent(
    input$`open-box-plus`,
    runjs('
      document
        .querySelector("#openable-box-plus")
        .parentElement
        .style.display = "block";
    ')
  )
}

shinyApp(ui, server)

当您在关闭它之前和之后检查 boxPlus 的 HTML 时,您可以看到样式display: none;被添加到<div>with 中class="box"

在此处输入图像描述

要选择特定的boxPlus,我添加了id = "openable-box-plus". 由于id去了divwith divstyle的子display元素,你必须选择父元素,并更改display"block"

document
  .querySelector("#openable-box-plus")
  .parentElement
  .style.display = "block";

推荐阅读