单击actionButton后将CSS添加到元素

Question

我正在尝试自定义具有光泽的登录页面。我包括了一个像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 */ }

Answer 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)