在“闪亮按钮”上应用2种不同的CSS样式

css r shiny

1032 观看

2回复

40 作者的声誉

我正在开发一个使用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)
作者: Yan Holtz 的来源 发布者: 2017 年 9 月 15 日

回应 2


2

6618 作者的声誉

决定

因此,您想向中添加一些特定的类radioGroupButtons。好吧,ShinyWidgets不允许您这样做,为什么不创建自己的radioButtons窗口小部件功能。

(嗯,此功能几乎全部复制自radioGroupButtons

提示:输入radioGroupButtonR控制台查看源代码。

然后调整该函数,使其接受class参数,该参数将应用于该html元素。然后,您可以radioGroupButton使用CSS 轻松访问不同的-class。

下面的工作代码:

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)
作者: K. Rohde 发布者: 2017 年 9 月 15 日

0

9211 作者的声誉

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

我可以在功能中删除对有效Bootstrap状态的限制,这对于此类样式很有用(请在此处填写一个问题以便我提出建议)。

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)
作者: Victorp 发布者: 2017 年 9 月 15 日
32x32