r-用shinyjs改变shinydashboard盒子的样式

Question

我正试图根据用户所在的选项卡更改shinydashboard框的颜色。为此，我从tabsetPanel中获取输入值，并尝试使用shinyjs更改box头类的css。不幸的是，我的试验都没有成功。这里有一个可复制的例子(颜色还不适应标签，但我会在第二部分中这样做(

library(shiny)
ui <- fluidPage(
shinyWidgets::useShinydashboard(),
tabsetPanel(
id = "mytab",
tabPanel("First",
shinydashboard::box(status = "primary",
title = "mybox",
solidHeader = TRUE, collapsible = TRUE,
sliderInput("orders", "Orders", min = 1, max = 2000, value = 650)
)),
tabPanel("Second", p("Second tab"))))
server <- function(input, output) {
observeEvent(input$mytab,{
shinyjs::runjs("$('.box-header').css('background', 'red');")
shinyjs::runjs("$('.box.box-solid.box-primary > .box-header').attr('style', 'background:red !important');")
})
}
shinyApp(ui = ui, server = server)

我尝试了第一次和第二次调用runjs之间的所有组合，但都失败了。

Answer 1

您只是在ui中缺少useShinyjs()。试试这个

library(shiny)
ui <- fluidPage(
useShinyjs(),
shinyWidgets::useShinydashboard(),
#tabBox( id = "mytab", width=6, title = "My Test Plot",
tabsetPanel(id = "mytab",
tabPanel("First", value="tab1",
shinydashboard::box(status = "primary",
title = "mybox",
solidHeader = TRUE, collapsible = TRUE,
sliderInput("orders", "Orders", min = 1, max = 2000, value = 650)
)),
tabPanel("Second", value="tab2", p("Second tab"),
shinydashboard::box(status = "warning",
title = "mybox",
solidHeader = TRUE, collapsible = TRUE,
sliderInput("orders2", "Orders", min = 1, max = 2000, value = 950)
))
)
)
server <- function(input, output) {
observeEvent(input$mytab,{
if (input$mytab=="tab1"){
shinyjs::runjs("$('.box-header').css('background', 'red');")
shinyjs::runjs("$('.box.box-solid.box-primary > .box-header').attr('style', 'background:red !important');")
} else if (input$mytab=="tab2"){
shinyjs::runjs("$('.box-header').css('background', 'blue');")
shinyjs::runjs("$('.box.box-solid.box-primary > .box-header').attr('style', 'background:blue !important');")
}

})
}
shinyApp(ui = ui, server = server)

Answer 2

https://rstudio.github.io/shinydashboard/appearance.html#css

## ui.R ##
dashboardPage(
dashboardHeader(title = "Custom font"),
dashboardSidebar(),
dashboardBody(
tags$head(
tags$link(rel = "stylesheet", type = "text/css", href = "custom.css")
)
)
)