Question

我正在开发一个使用shinyWidgets库的R Shiny应用程序。我使用了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）

复制

提示：在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

您可以添加Bootstrap状态，然后覆盖该类，例如，如果添加status = "danger"，按钮将具有类btn-danger：

我可以删除函数中有效Bootstrap状态的限制，它可能对这样的样式很有用（填写问题here，所以我记得了。）

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)

在Shiny Button上应用2种不同的CSS样式

2 个答案: