如何在 R Shiny 中更改框的折叠/展开按钮的颜色？

Posted 2023-02-22

【中文标题】如何在 R Shiny 中更改框的折叠/展开按钮的颜色？

【英文标题】：How to change the color of a box's collapse/expand button in R Shiny?

【发布时间】：2020-07-10 02:58:05

【问题描述】：

我不知道如何更改可折叠框的 +/- 按钮的颜色。我想将白色按钮更改为黑色。下面是示例代码：

library(shiny)
library(shinydashboard)

body <- dashboardBody(
  fluidRow(
    box(status = "info", solidHeader = TRUE, title = "Background - Hypothetical Life", width = "auto", collapsible = TRUE, collapsed = TRUE,
            h5("sample text"))))

ui <- dashboardPage(
  dashboardHeader(title = "Box"),
  dashboardSidebar(),
  body
)

server = function(input, output, session)  
shinyApp(ui = ui, server = server)

非常感谢！

【参考方案1】：

以下是使用 CSS 的方法：

library(shiny)
library(shinydashboard)

body <- dashboardBody(
  tags$style(
    type = 'text/css',
    '.fa, .fas 
      font-weight: 900;
      color: black;
    '
  ),
  fluidRow(
    box(status = "info", solidHeader = TRUE, 
        title = "Background - Hypothetical Life", 
        width = "auto", collapsible = TRUE, collapsed = TRUE,
        h5("sample text"))))

ui <- dashboardPage(
  dashboardHeader(title = "Box"),
  dashboardSidebar(),
  body
)

server = function(input, output, session)  
shinyApp(ui = ui, server = server)

正如in this answer 所说，当您想更改 CSS 样式但并不真正了解 CSS（如我）时，在浏览器中启动您的应用程序，执行“检查元素”（右键单击或 Ctrl+Shift+ C 为我）并检查“检查员”。它将显示每个元素的 CSS 描述。

然后，像上面的示例一样，将此 CSS 代码放入 tags$style 中，并添加一些参数来自定义它。网上有很多关于 CSS 的资源。

例如，在上面的例子中，我在“Inspector”中看到图标的 CSS 样式是：

.fa, .fas 
   font-weight: 900;

所以我只是把它放在tags$style 中，然后搜索我需要修改图标颜色的参数是什么。 This answer 到另一个帖子给了我解决方案：您需要添加color。

希望对你有帮助

【讨论】：

@debster 你能把它作为一个解决方案验证并投票吗？