シャイニーボタンに2種類のCSSスタイルを適用する

Question

shinyWidgetsライブラリを使用するRシャイニーアプリケーションを開発しています。私は2回radioGroupButtonsウィジェットを使用します。初めて緑色にしたい、もう一度赤色にしたい、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からコピーされる）

ヒント：ソースコードを表示するRコンソールにradioGroupButtonを入力します。

そしてhtml要素に適用されるclass引数を受け入れるように、その機能を調整することができます。次に、あなたのCSSで別のradioGroupButtonクラスに簡単にアクセスできます。

以下のコードの作業：あなたはstatus = "danger"を追加した場合、ボタンはクラスbtn-danger必要があります例えば、クラスを上書きし、次にブートストラップ・ステータスを追加することができます

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

を：

を私が有効に制限を削除することができます機能のブートストラップ状態、それはそのようなスタイリング（有用なことがあります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)