R闪亮有条件地更改numericInput背景颜色

时间:2018-05-13 06:54:41

标签: css r shiny user-input conditional-formatting

请考虑以下代码:

library(shiny)

ui <- shinyUI(
    fluidPage(
        column(12,
               numericInput("test", h5("Test value:"), value = 500, min = 0, max = 10000, step = 100, width = '200px')
        )
    )
)

server <- function(input, output) {
}

shinyApp(ui = ui, server = server)

我想根据无效的用户输入将numericInput小部件的背景颜色更改为红色。因此,如果用户输入文本或超出最小和最大范围的值,则窗口小部件应为红色。

请注意,我不能使用CSS文件的解决方案,例如:

input:invalid {
    background-color: #FFCCCC !important;
}

原因是,如果用户输入的值不是numericInput语句中“step”值的倍数,则会将背景颜色设置为红色(有关详细信息,请参阅:R shiny numericInput step and min value interaction)。

那么如何通过基于我定义的验证规则有条件地设置样式来实现我自己的手动验证?也就是说,我可以应用任何规则来说明什么是有效的,例如:

  • if(is.numeric(input $ test))
  • if(输入$ test&gt; = 0)
  • if(输入$ test&lt; = 10000)

1 个答案:

答案 0 :(得分:0)

如果您想避免使用 JS,但希望一个对象(或一组对象)根据某些用户输入更新它们的颜色,这是另一个答案:

#define reactive value
color <- reactiveVal(#77787B)

#Current Color----
#some user action
  observeEvent(input$some_action,{
    color <- switch (condition,
                     "case1" = "#57a595",
                     "case2" = "#f4552e",
                     "#77787B" #default color
                     
    )
  })
  output$color_style <- renderUI({
    #any valid selector can be used in place of "elementId"
    tags$style(HTML(paste0("#elementId {
      background-color: ",color,";}")))
  })

上面的代码会出现在你的服务器脚本中,然后你只需要定义输入对象和你在 ui 脚本中修改颜色的元素。

这也可用于更新任何其他 CSS 属性