单击actionButton后将css添加到元素

【问题标题】：Adding css to an element after clicking on actionButton单击actionButton后将css添加到元素
【发布时间】：2018-10-26 21:40:05
【问题描述】：

我正在尝试自定义带有闪亮的登录页面。我已经包含了一个像 textInput("login_username", "Username") 这样的 textInput ，我想要做的是当 Username 不在数据库中时 output$login_username 的边框会变成红色。那么如何在事件发生后将 CSS 添加到元素中。

假设这是我的if 句子：

if(is_validate){ /* action to do */ }
else { output$login_username <- /* action that i'm looking for */ }

【问题讨论】：

标签： shiny shiny-server

【解决方案1】：

以下是如何借助 shinyjs 包添加颜色的小示例，我还在右下角添加了一条带有消息的通知：

library(shiny)
library(shinyjs)

allowedusers <- c("Pork_Chop","BKenz")
jsCode <- "shinyjs.TextCol = function(params){$('#login_username').css('background', params);}"

# For border color use below
jsCode <- "shinyjs.TextCol = function(params){$('#login_username').css('border-color', params);}"

ui <- fluidPage(
  useShinyjs(),
  extendShinyjs(text = jsCode),
  textInput("login_username", "Username"),
  actionButton("Login","Login")
)

server <- function(input, output,session) {

  observeEvent(input$Login,{
    req(input$login_username!="")

    if(!(input$login_username %in% allowedusers)){
      js$TextCol("red")
      showNotification("user doesnt exists",type="warning")
    }
    else{
      js$TextCol("white")
    }
  })
}

shinyApp(ui = ui, server = server)

【讨论】：