如何从闪亮的闪亮假发中将CSS样式应用于actionBttn

Question

我有一个示例闪亮的应用程序，如下所示。为了使用selectInput到actionButton，我需要添加style='margin-top:25px'。 Shinywidgets软件包具有某些内置样式的actionBttn小部件。例如，我喜欢带有style='gradient'的那个。但是我不知道如何使用CSS样式在顶部添加边距以使actionBttn与其他元素对齐？

library(shiny)
library(shinydashboard)
library(shinyWidgets)


ui <- dashboardPage(
    dashboardHeader(title = "example"),
    dashboardSidebar(),
    dashboardBody(
        box(width=12,

            column(width = 3, dateRangeInput("dateRange", "Date Range",
                                             start  = "2017-01-01",
                                             end    =  Sys.Date(),
                                             min    = "2001-01-01",
                                             max    = Sys.Date(),
                                             format = "mm/dd/yy",
                                             separator = " - ") ),

            column(width=3, selectizeInput(inputId = 'var', 
                                           label='Select variable',
                                           choices = c('cut', 'color'), 
                                           multiple=FALSE,
                                           options = list(
                                               maxItems = 1,
                                               placeholder = '',
                                               onInitialize = I("function() { this.setValue(''); }"))) ),

            column(width=1,  offset =2, actionButton('Apply', 'Apply', style='margin-top:25px') ),

            column(width=3,  actionBttn(
                inputId = 'clear',
                label = "Clear", 
                style = "gradient",
                color = "danger" ) )

        )
    )
)

server <- function(input, output, session) {

}

shinyApp(ui, server)

Answer 1

很难说出您的.css，但您可以在here中找到一个示例

Answer 2

要向由包创建的现有元素添加样式，有时您必须包装该元素。这是两种方法：

1. 将元素本身包装为所需样式的div。可能不适用于所有CSS元素。

2. 使用所需元素的源代码编写自己的自定义函数。在这里，我使用了https://github.com/dreamRs/shinyWidgets/blob/ac8134e944f91fdcc4490ace6d839c46e7df02ff/R/actionBttn.R#L63

的源代码

library(shiny)
library(shinyWidgets)


# new function for approach #2
actionBttn_with_style <- function(inputId, label = NULL, icon = NULL, style = "unite",
                       color = "default", size = "md", block = FALSE,
                       no_outline = TRUE, my_additional_style = "") {
  value <- shiny::restoreInput(id = inputId, default = NULL)
  style <- match.arg(
    arg = style,
    choices = c("simple", "bordered", "minimal", "stretch", "jelly",
                "gradient", "fill", "material-circle", "material-flat",
                "pill", "float", "unite")
  )
  color <- match.arg(
    arg = color,
    choices = c("default", "primary", "warning", "danger", "success", "royal")
  )
  size <- match.arg(arg = size, choices = c("xs", "sm", "md", "lg"))

  tagBttn <- htmltools::tags$button(
    id = inputId, type = "button", class = "action-button bttn", `data-val` = value,
    class = paste0("bttn-", style), 
    class = paste0("bttn-", size),
    class = paste0("bttn-", color), list(icon, label),
    class = if (block) "bttn-block",
    class = if (no_outline) "bttn-no-outline",
    style = my_additional_style
  )
  shinyWidgets:::attachShinyWidgetsDep(tagBttn, "bttn")
}

完成自定义按钮功能后，可以像在actionBttn内的ui一样使用它。

ui <- dashboardPage(
  dashboardHeader(
    title = "example"),
  dashboardSidebar(),
  dashboardBody(
    box(
      width = 12,

      column(
        width = 3,
        dateRangeInput(
          "dateRange",
          "Date Range",
          start  = "2017-01-01",
          end    =  Sys.Date(),
          min    = "2001-01-01",
          max    = Sys.Date(),
          format = "mm/dd/yy",
          separator = " - "
        )
      ),

      column(
        width = 1,
        offset = 2,
        actionButton('Apply', 'Apply', style = 'margin-top:25px')
      ),

      column(
        width = 3,
        # Wrap your actionBttn in a div here, approach #1
        div(
          actionBttn(
            inputId = 'clear',
            label = "Clear with div",
            style = "gradient",
            color = "danger"
          ),
          style = 'margin-top:25px'
        )
      ),
      column(
        width = 3,
        # use your custom actionBttn function here, approach #2
        actionBttn_with_style(
          inputId = 'clear',
          label = "Clear with custom function",
          style = "gradient",
          color = "danger",
          my_additional_style = 'margin-top:25px'
        )
      )


    )
  )
)

server <- function(input, output, session) {

}

shinyApp(ui, server)