在Shiny Button上應用2種不同的CSS樣式

Question

我正在開發使用shinyWidgets庫的R Shiny應用程序。我使用了RadioGroupButtons小部件的2倍。我想第一次使它變綠，第二次變紅，使用CSS。 （實際上我想做更多的定製）。

這是一個基本代碼，將CSS應用到每個按鈕。我如何申請2個CSS類？

非常感謝您的幫助！

library("shinyWidgets") 
library(shiny) 

# Useless server 
server <- function(input, output) { 
    output$distPlot <- renderPlot({ 
    hist(rnorm(input$button1), col = 'skyblue', border = 'white') 
    }) 
} 

# Ui 
ui <- fluidPage(
    sidebarLayout(
    sidebarPanel(

     # A CSS for every .btn button 
     tags$style(HTML(" 
      .btn { 
       color: #2ecc71; 
       border: 2px #2ecc71 solid; 
      } 
      .btn:hover { 
       color: #fff; 
       background-color: #2ecc71; 
      } 
      .btn-default.active, .btn-default:active, .open > .dropdown-toggle.btn-default { 
       color: #fff; 
       background-color: #2ecc71; 
       border-color: #2ecc71; 
      } 
     ")), 

     # first radio button, it is green! 
     radioGroupButtons("button1", label = "It's green !!", choices=c("choice1"=50, "Choice2"=100, "Choice3"=150), selected=100), 

     # second radio button, I wish it is red! 
     radioGroupButtons("button2", label = "I wish I was red :(...", choices=c("choice1"=1, "Choice2"=2), selected=1) 
    ), 
    mainPanel(plotOutput("distPlot")) 
) 
) 

shinyApp(ui = ui, server = server) 

Answer 1

所以你想添加一些特定的類到你的radioGroupButtons。那麼，ShinyWidgets不會讓你，所以爲什麼不創建自己的radioButtons控件功能。

（當然，這個功能將被幾乎完全從radioGroupButtons複製）

提示：radioGroupButton類型進R控制檯查看源代碼。

然後調整該函數，使其接受class參數，該參數將應用於html元素。然後，您可以使用CSS輕鬆訪問不同的radioGroupButton類。下面

工作代碼：

library("shinyWidgets") 
library(shiny) 

# Defining the new Widget. 
customRadioGroupButtons <- function (inputId, label = NULL, choices, selected = NULL, status = "default", size = "normal", direction = "horizontal", justified = FALSE, individual = FALSE, checkIcon = list(), class=NULL) { 
    choices <- shinyWidgets:::choicesWithNames(choices) 
    if (!is.null(selected) && length(selected) > 1) 
    stop("selected must be length 1") 
    if (is.null(selected)) 
    selected <- choices[1] 
    size <- match.arg(arg = size, choices = c("xs", "sm", "normal", 
              "lg")) 
    direction <- match.arg(arg = direction, choices = c("horizontal", 
                 "vertical")) 
    status <- match.arg(arg = status, choices = c("default", 
               "primary", "success", "info", "warning", "danger")) 
    divClass <- if (individual) 
    "" 
    else "btn-group" 
    if (!individual & direction == "vertical") { 
    divClass <- paste0(divClass, "-vertical") 
    } 
    if (justified) { 
    divClass <- paste(divClass, "btn-group-justified") 
    } 
    if (size != "normal") { 
    divClass <- paste0(divClass, " btn-group-", size) 
    } 

    # Below here, the paste call is the only difference to the original function. 
    radioGroupButtonsTag <- tagList(tags$div(id = inputId, class = paste("radioGroupButtons", class), 
    if (!is.null(label)) 
     tags$label(class = "control-label", `for` = inputId, label), 
    if (!is.null(label)) 
     br(), style = "margin-top: 3px; margin-bottom: 3px; ", style = if (justified) "width: 100%;", 
     tags$div(class = divClass, role = "group", 
     `aria-label` = "...", `data-toggle` = "buttons", 
     class = "btn-group-container-sw", shinyWidgets:::generateRGB(inputId, choices, selected, status, size, checkIcon)))) 
    shinyWidgets:::attachShinyWidgetsDep(radioGroupButtonsTag) 
} 

# Useless server 
server <- function(input, output) { 
    output$distPlot <- renderPlot({ 
    hist(rnorm(input$button1), col = 'skyblue', border = 'white') 
    }) 
} 

# Ui 
ui <- fluidPage(
    sidebarLayout(
    sidebarPanel(

     # Note: Consider making a function if you use this more often. 
     tags$style(HTML(" 
         .radioGroupButtons.green .btn { 
         color: #2ecc71; 
         border: 2px #2ecc71 solid; 
         } 
         .radioGroupButtons.green .btn:hover { 
         color: #fff; 
         background-color: #2ecc71; 
         } 
         .radioGroupButtons.green .btn-default.active, .radioGroupButtons.green .btn-default:active, .radioGroupButtons.green .open > .dropdown-toggle.btn-default { 
         color: #fff; 
         background-color: #2ecc71; 
         border-color: #2ecc71; 
         } 

         .radioGroupButtons.red .btn { 
         color: #EE102B; 
         border: 2px #EE102B solid; 
         } 
         .radioGroupButtons.red .btn:hover { 
         color: #fff; 
         background-color: #EE102B; 
         } 
         .radioGroupButtons.red .btn-default.active, .radioGroupButtons.green .btn-default:active, .radioGroupButtons.green .open > .dropdown-toggle.btn-default { 
         color: #fff; 
         background-color: #EE102B; 
         border-color: #EE102B; 
         } 
         ")), 

     # first radio button, it is green! 
     customRadioGroupButtons("button1", class="green", label = "It's green !!", choices=c("choice1"=50, "Choice2"=100, "Choice3"=150), selected=100), 

     # second radio button, I wish it is red! 
     customRadioGroupButtons("button2", class="red", label = "I wish I was red :(...", choices=c("choice1"=1, "Choice2"=2), selected=1) 
    ), 
    mainPanel(plotOutput("distPlot")) 
    ) 
    ) 

shinyApp(ui = ui, server = server) 

Answer 2

您可以添加然後引導狀態覆蓋類，例如，如果您添加status = "danger"，按鈕會有btn-danger類：

我可以刪除限制有效引導狀態在函數中，它可能對這樣的樣式很有用（填寫問題here，所以我remenber）。

library("shinyWidgets") 
library("shiny") 

# Useless server 
server <- function(input, output) { 
    output$distPlot <- renderPlot({ 
    hist(rnorm(input$button1), col = 'skyblue', border = 'white') 
    }) 
} 

# Ui 
ui <- fluidPage(
    sidebarLayout(
    sidebarPanel(

     # A CSS for every .btn button 
     tags$style(HTML(" 
         .btn-success.btn { 
         color: #2ecc71; 
         background-color: #fff; 
         border: 2px #2ecc71 solid; 
         } 
         .btn-success.btn:hover { 
         color: #fff; 
         background-color: #2ecc71; 
         } 
         .btn-success.active { 
         color: #fff; 
         background-color: #2ecc71; 
         border-color: #2ecc71; 
         } 

         .btn-danger.btn { 
         color: #EE102B; 
         background-color: #fff; 
         border: 2px #EE102B solid; 
         } 
         .btn-danger.btn:hover { 
         color: #fff; 
         background-color: #EE102B; 
         } 
         .btn-danger.active { 
         color: #fff; 
         background-color: #EE102B; 
         border-color: #EE102B; 
         } 
         ")), 

     # first radio button, it is green! 
     radioGroupButtons("button1", label = "It's green !!", status = "success", choices=c("choice1"=50, "Choice2"=100, "Choice3"=150), selected=100), 

     # second radio button, I wish it is red! 
     radioGroupButtons("button2", label = "I wish I was red :(...", status = "danger", choices=c("choice1"=1, "Choice2"=2), selected=1) 
    ), 
    mainPanel(plotOutput("distPlot")) 
    ) 
    ) 

shinyApp(ui = ui, server = server)