正文 

当前位置： 首页 > 知识 >

R shinyDashboard 自定义框状态颜色

     2023-02-19     107

关键词：

【中文标题】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)

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

【讨论】：

R 闪亮框内容背景颜色

...尝试将框的背景内容颜色从白色更改为#222d32（或任何自定义颜色），但是在使用background参数时出现错误validateColor（背景）错误：颜色无效：#222d32。有效的颜色有：红色、黄色、水绿色、蓝色、浅蓝色、绿色、海军蓝、蓝绿色... 查看详情

自定义文本框占位颜色和runtime

...海里就有个思路，既然和系统给的不一样，那肯定就要自定义了，最开始我并不知道怎么改，所以我点进去，UITextField类里面，既然是占位颜色，所以我就搜索place，就发现了这两个属性，想都不用想，肯定我们对第二个属性进... 查看详情

颜色组合框和自定义颜色选择器

】颜色组合框和自定义颜色选择器【英文标题】：Colorcomboboxandcustomcolorpicker【发布时间】：2021-10-2407:11:17【问题描述】：我是c#和wpf的新手，所以我想知道我应该如何处理这种控制。我需要一个可以预览基本颜色的组合框和一个... 查看详情

状态栏背景颜色不会更改为自定义颜色

】状态栏背景颜色不会更改为自定义颜色【英文标题】：Statusbarbackgroundcolordoesnotchangetocustomcolor【发布时间】：2018-06-2323:58:58【问题描述】：当我将状态栏背景颜色更改为原生UIColor.gray时，它会发生变化。但是当我想使用自定义... 查看详情

自定义背景颜色弹性框

】自定义背景颜色弹性框【英文标题】：Custombackgroundcolorflexbox【发布时间】：2017-04-3019:33:36【问题描述】：我想在flexbox上设置背景颜色并尝试如下。应用上的类定义：<Appid="app"class="weight-protocol"></App>在FlexBox上：<FlexB... 查看详情

文本编辑框光标颜色和占位文字颜色自定义

1.自定义一个自己的UITextField类,在类中实现如下代码:方法一:利用UITextField属性attributedPlaceholder直接设置-(void)awakeFromNib{[superawakeFromNib];//光标颜色self.tintColor=[UIColorwhiteColor];//占位文字颜色[selfaddTarget:selfaction:@selecto 查看详情

状态栏自定义文本颜色

】状态栏自定义文本颜色【英文标题】：Statusbarcustomtextcolor【发布时间】：2017-04-2711:05:41【问题描述】：除了默认的白色和黑色之外，是否可以更改状态栏文本颜色？比如变红？我的应用面向iOS10，所以我支持最新的iOSSDK。【问... 查看详情

如何防止 AppBar 覆盖自定义状态栏颜色

】如何防止AppBar覆盖自定义状态栏颜色【英文标题】：HowtopreventAppBarfromoverridingcustomstatusbarcolor【发布时间】：2020-11-0600:09:21【问题描述】：我无法更改状态栏颜色，似乎是因为AppBar一直在覆盖它。Widgetbuild(BuildContextcontext)returnSca... 查看详情

iOS自定义状态栏背景颜色不显示

】iOS自定义状态栏背景颜色不显示【英文标题】：iOSCustomStatusBarBackgroundColornotdisplaying【发布时间】：2015-08-0104:50:50【问题描述】：我正在尝试使用以下方法将状态栏背景颜色填充为橙色UINavigationBar.appearance().tintColor=UIColor.orangeCol... 查看详情

快速设置状态栏的自定义颜色？

】快速设置状态栏的自定义颜色？【英文标题】：setcustomcolorofstatusbarinswift?【发布时间】：2018-04-2016:58:05【问题描述】：在视图控制器上，我想将状态栏的颜色设置为黑色，但我无法更改它。为此，我正在使用以下代码。funcsetUp... 查看详情

自定义 iOS 7 状态栏文本颜色

】自定义iOS7状态栏文本颜色【英文标题】：CustomizeiOS7statusbartextColor【发布时间】：2014-07-3108:10:20【问题描述】：我想知道除了黑色和白色颜色之外，还有没有办法改变iOS7状态栏文字颜色？【问题讨论】：***.com/questions/21465486/…... 查看详情

如何自定义状态栏图标和文字颜色？例如。状态栏背景：白色，状态栏图标颜色，文字：红色

】如何自定义状态栏图标和文字颜色？例如。状态栏背景：白色，状态栏图标颜色，文字：红色【英文标题】：Howtocustomizestatusbariconsandtextcolor?E.g.statusbarbackground:white,statusbariconcolor,andtext:red【发布时间】：2021-09-1908:54:35【问题描... 查看详情

r语言使用r原生函数plot和lines可视化线图并使用lty参数自定义线条类型lwd自定义设置线条的粗细col参数自定义线条颜色(changerbaseplotlinetypes)

R语言使用R原生函数plot和lines可视化线图、并使用lty参数自定义线条类型、lwd自定义设置线条的粗细、col参数自定义线条颜色(ChangeRbaseplotlinetypes)目录 查看详情

如何将可自定义的颜色更改框下载为带有背景图像的图像？

】如何将可自定义的颜色更改框下载为带有背景图像的图像？【英文标题】：Howtodownloadcustomisablecolorchangeboxasimagewiththebackgroundimage?【发布时间】：2021-10-1614:26:42【问题描述】：我有一个可以改变颜色的盒子，只要你选择盒子然后... 查看详情

r语言r原生以及ggplot2设置线条类型宽度（粗细）颜色的函数ggplot2手动自定义设置线条类型粗细颜色函数（linetypesthicknesscolour）

R语言自定义R原生绘图函数和ggplot2包中的线条类型、线条宽度（粗细）、线条色彩、R原生以及ggplot2设置线条类型、宽度（粗细）、颜色的函数、ggplot2手动自定义设置线条类型、粗细、颜色函数目录 查看详情

r语言创建自定义颜色（分类变量与颜色形成稳定映射）实战：设置因子变量（分类变量）到可视化颜色的稳定映射

R语言创建自定义颜色（分类变量与颜色形成稳定映射）实战：设置因子变量（分类变量）到可视化颜色的稳定映射目录 查看详情

r plot_ly scatter 中的自定义颜色范围

】rplot_lyscatter中的自定义颜色范围【英文标题】：Customcolorrangeinrplot_lyscatter【发布时间】：2021-12-2719:14:16【问题描述】：我正在努力为plot_ly散点图中的颜色值设置自定义范围/截止值。data(mtcars)plot_tmp<-plot_ly(data=mtcars,marker=list(s... 查看详情

UIButton 系统与自定义在颜色、图像、状态等方面？

】UIButton系统与自定义在颜色、图像、状态等方面？【英文标题】：UIButtonsystemvs.customintermsofcolors,images,states,etc?【发布时间】：2017-11-2407:30:33【问题描述】：UIButtonTypecustom和system有什么区别。adjustsImageWhenHighlighted之类的属性将如... 查看详情