R shinydashboard为状态参数添加自定义颜色 [英] R shinydashboard add a customized color for status parameter

问题描述

所以我的问题与这个问题非常相关：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)

验证状态(状态)中出错： 无效状态：Primiy2。有效状态为：主要、成功、信息、警告、危险。

推荐答案

下面是一种老套的方法。本质上，您需要创建一个定制div并使用它的id标记，以便css样式优先于原始的box样式，并使用renderUI生成这个新的定制box。

但是，您也不希望无意中设置另一个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为状态参数添加自定义颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！