R shinyDashboard 自定义框状态颜色

Posted 2023-02-19

【中文标题】R shinyDashboard 自定义框状态颜色

【英文标题】：R shinyDashboard customize box status color

【发布时间】：2016-07-04 23:31:46

【问题描述】：

我想自定义闪亮应用的框状态颜色。 我找到了一种 css 方法来更改这些框的框背景颜色但不自定义状态颜色，但是我在 css 中没有看到“状态”的等效参数？ 因此，我打印了一个包含考虑的参数“状态”的简单页面的源代码，我正在查看它的类（我认为 class="box box-solid box-primary"）但我无法在几个本网页提供的 .css... :(

你有什么想法吗？

这是这个简单的代码：

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    fluidRow(
      box(width = 6, title = "youhou", status = "primary", solidHeader = TRUE,
          "Box content"
      )
    )
    )
    )


server <- function(input, output) 

shinyApp(ui, server)

提前感谢您的帮助！

恰

【问题讨论】：

对于 Dimitry 的问题，我发现这个 SO 帖子是一个完美的答案：Add a customized color for status parameter

【参考方案1】：

我终于找到了答案（漫长而艰难但总是令人欣慰：D）

我的一个朋友（非常感谢我的朋友！！！）向我展示了如何显示网页（尤其是闪亮页面）每个元素的所有 css 参数：转到相应的页面并右键单击，比如“检查元素”！！

太棒了！

然后，我看的更深（非常非常非常深，有这么多类！！），我设法访问了盒子的任何 css 参数！

这里是下一个人的代码：

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    tags$style(html("


.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;


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


server <- function(input, output) 

shinyApp(ui, server)

周末愉快！！

干杯！

【讨论】：

这太棒了！谢谢你和你的朋友

此解决方案似乎仅适用于以下 boxPlus() 或 box() 参数：solidHeader = TRUE 和 status = "primary"。否则失败。我应该如何寻求不受这些论点限制的更灵活的解决方案？我怀疑这是.box.box-solid.box-primary 行，尽管我不知道如何准确更改它。谢谢。

我和@DmitryIshutin 有同样的评论。当solidHeader = FALSE时，我该如何更改？反正有没有看到所有的css元素？这是我在 Shiny 中反复出现的问题。

【参考方案2】：

这太棒了，对我来说效果很好！我只是想补充一点，如果您希望能够将新颜色与solidHeader = FALSE 一起使用，您可以添加一小段代码（以解决 Dmitri 的问题）。您需要更改标题中文本的颜色（我现在使用黑色）并且我的新“状态”是紫色。下面是一个示例（我替换的是danger 状态而不是primary）：

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    tags$style(HTML("


.box.box-solid.box-danger>.box-header 
  color:#fff;
  background:#9966ff
                    

.box.box-solid.box-danger
border-bottom-color:#9966ff;
border-left-color:#9966ff;
border-right-color:#9966ff;
border-top-color:#9966ff;


.box.box-danger>.box-header 
  color:#000000;
  background:#fff
                    

.box.box-danger
border-bottom-color:#9966ff;
border-left-color:#9966ff;
border-right-color:#9966ff;
border-top-color:#9966ff;


                                    ")),
    fluidRow(
      box(width = 6, title = "youhou", status = "danger", solidHeader = FALSE,
          "Box content"
      )
    )
  )
)


server <- function(input, output) 

shinyApp(ui, server)

（我按照 OP 的说明显示所有 css 参数，找到了这种框的正确参数。）

【参考方案3】：

由于我已经尝试更改状态颜色几个小时了，如果有人再次遇到同样的问题，我想我会在这里分享我的解决方案。

我试图在一个专用的 CSS 文件中编辑 CSS 代码，但这不起作用。但是，当我通过 tags$style 将 CSS 代码直接添加到闪亮的应用程序文件中时（就像 Charlotte Sirot 和 Michelle Ross 提供的解决方案），它起作用了。

可能与优先考虑 CSS 样式代码的来源有关，并且直接添加带有 tags$style 的代码会覆盖所有其他来源。

【参考方案4】：

我只是从@Michelle Ross 和@Charlotte Sirot 构建出色的答案，并希望其他人也将从这种变化中受益：我想为不同的状态定制不同的颜色，这里我选择了“危险”和“信息” .我还希望盒子内容背景填充颜色。为了实现这一点，我使用了以下代码：

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    tags$style(HTML("


.box.box-solid.box-danger>.box-header 
  color:#9966ff;
  background:#9966ff
                    

.box.box-solid.box-danger
border-bottom-color:#9966ff;
border-left-color:#9966ff;
border-right-color:#9966ff;
border-top-color:#9966ff;


.box.box-danger>.box-header 
  color:#fff; 
  background:#9966ff
                    

.box.box-danger
border-bottom-color:#9966ff;
border-left-color:#9966ff;
border-right-color:#9966ff;
border-top-color:#9966ff;
background: #9966FF;


.box.box-solid.box-info>.box-header 
  color:#000000;
  background:#FFAE66
                    

.box.box-solid.box-info
border-bottom-color:#FFAE66;
border-left-color:#FFAE66;
border-right-color:#FFAE66;
border-top-color:#FFAE66;


.box.box-info>.box-header 
  color:#fff; 
  background:#FFAE66
                    

.box.box-info
border-bottom-color:#FFAE66;
border-left-color:#FFAE66;
border-right-color:#FFAE66;
border-top-color:#FFAE66;
background: #FFAE66;


                                    ")),
    fluidRow(
      box(width = 6, title = "youhou", status = "danger", solidHeader = FALSE,
          "Box content"
      ),
      box(width = 6, title = "Hanna", status = "info", solidHeader = F,
          "blabla")
    )
  )
)


server <- function(input, output) 

shinyApp(ui, server)

并生成了一个带有如下框的闪亮仪表板：