Question

所以我的问题与此有关：R shinyDashboard customize box status color

但是，问题是所提供的解决方案没有添加可用的颜色，而仅替换了现有的颜色。因此，我们将一个闪亮的应用程序中的盒子的颜色限制为仅5种。换句话说，我想在保留现有颜色的同时添加自定义颜色

所以我想到了类似的解决方案，但是没有用...

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
        tags$style(HTML("
                        .box.box-solid.box-primary2>.box-header {
                        color:#fff;
                        background:#666666
                        }

                        .box.box-solid.box-primary2{
                        border-bottom-color:#666666;
                        border-left-color:#666666;
                        border-right-color:#666666;
                        border-top-color:#666666;
                        }

                        ")),
        fluidRow(
            box(width = 6, title = "youhou", status = "primary2", solidHeader = TRUE,
                "Box content"
            )
        )
        )
    )


server <- function(input, output) {}

shinyApp(ui, server)

validateStatus（status）中的错误：无效状态：primary2。有效状态为：主要，成功，信息，警告，危险。

Answer 1

下面是一种 hacky 的实现方式。本质上，您需要创建一个自定义div并使用它的id标记，以便css样式优先于原始框样式，并使用renderUI生成此新的自定义框。

但是，您也不想无意间为另一个box设置样式，因此您可以使用id将样式专门应用于所选的box。

最后，您在服务器端使用uiOutput和renderUI来创建这个新的div和相应的样式框。

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    fluidRow(

      box(width = 6, title = "youhou", status = "primary", solidHeader = TRUE,
          "Box content"
      ),

      uiOutput("primary2")
    )
  )
)


server <- function(input, output) {

  output$primary2 <- renderUI({
    tags$div(class = "another-box", id = "primariy2",
    box(width = 6, title = "youhou", status = "primary", solidHeader = TRUE,
        "Box content"
    ),
    tags$style(HTML("
                        #primariy2 .box.box-solid.box-primary>.box-header {
                        color:#fff;
                        background:#666666
                        }

                        .box.box-solid.box-primary {
                        border-bottom-color:#666666;
                        border-left-color:#666666;
                        border-right-color:#666666;
                        border-top-color:#666666;
                        }

                        ")) 
  )

  })

}

R Shinydashboard为状态参数添加自定义颜色

1 个答案: