【问题标题】:R shinydashboard custom CSS to valueBoxR shinydashboard 自定义 CSS 到 valueBox
【发布时间】:2017-03-31 14:01:21
【问题描述】:

我一直在尝试将 valueBox 的颜色更改为自定义颜色(超出 validColors 中可用的颜色),但无法这样做。我知道有一种方法可以使用标签来包含自定义 CSS,但是我无法将它们放在正确的位置。

ui<- dashboardPage(   
                dashboardHeader(),  
                 dashboardSidebar(),  
                 dashboardBody(  
                           fluidRow(valueBoxOutput("name")  
                             )))

 server<- function(input, output){  
  output$name<- renderValueBox({ valueBox(  
    ("example"), subtitle = "Subtitle text",color="blue")}  
  )}

非常感谢任何帮助!

【问题讨论】:

    标签: html css r shiny shinydashboard


    【解决方案1】:

    您好,您可以使用tags$style 在 UI 中覆盖 CSS 类以添加自定义颜色,如下所示,修改 background-color 为框颜色(这里是闪亮的黄色)和 color 为文本颜色。这里只有 color = "yellow" 的框将被修改,因为只有类 .small-box.bg-yellow 被更新。

    library("shiny")
    library("shinydashboard")
    
    ui<- dashboardPage(
      dashboardHeader(),  
      dashboardSidebar(),  
      dashboardBody(
        tags$style(".small-box.bg-yellow { background-color: #FFFF00 !important; color: #000000 !important; }"),
        fluidRow(
          valueBoxOutput("name1"), 
          valueBoxOutput("name2")
        )
      )
    )
    
    server<- function(input, output){
      output$name1 <- renderValueBox({
        valueBox("example", subtitle = "Subtitle text", color = "yellow")
      })
      output$name2 <- renderValueBox({
        valueBox("example", subtitle = "Subtitle text", color = "blue")
      })
    }
    shinyApp(ui = ui, server = server)
    

    【讨论】:

    • 感谢 Victorp,正是我所追求的。干杯。
    • 嗨!如果我想在我的脚本 .css 中进行此更改,会发生什么?我正在尝试这个.small-box.bg-yellow { background-color: #FFFF00 !important; color: #000000 !important; }但没有任何改变
    • 你有valueBoxcolor = "yellow" 吗? CSS 中的bg-yellow 来自颜色参数
    • 如何直观地知道css标签是什么?!这部分让我很困惑。
    • @ethan tenison 你可以在这里找到一个很好的教程:unleash-shiny.rinterface.com/beautify-css.html
    猜你喜欢
    • 2016-12-11
    • 2016-05-27
    • 2016-07-04
    • 2015-08-28
    • 2020-08-08
    • 2020-02-12
    • 2021-04-25
    • 1970-01-01
    • 2018-04-08
    相关资源
    最近更新 更多