css - 如何将 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

要将样式添加到由包创建的现有元素，有时您必须包装该元素。以下是三种方法：

1. div用你想要的样式将元素本身包裹起来。可能不适用于所有 CSS 元素。

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

3. 添加一些仅针对该元素的外部 CSS。这是我最不喜欢的方法，因为它将逻辑从实际应用的地方移开，并且您必须为要修改的每个元素跟踪它。

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(

    # for approach #3, but this is far away from the button in the code
    htmltools::tags$head(
      htmltools::tags$style('button#clear_ext_css { margin-top:25px }')
    ),

    box(
      width = 12,

      column(
        width = 2,
        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,
        actionButton('Apply', 'Apply', style = 'margin-top:25px')
      ),

      column(
        width = 3,
        # approach #1, just wrapping it in a styled div
        div(
          actionBttn(
            inputId = 'clear_div',
            label = "Clear with div",
            style = "gradient",
            color = "danger"
          ),
          style = 'margin-top:25px'
        )
      ),
      column(
        width = 3,
        # approach #2, custom function from above
        actionBttn_with_style(
          inputId = 'clear_fn',
          label = "Clear with custom function",
          style = "gradient",
          color = "danger",
          my_additional_style = 'margin-top:25px'
        )
      ),
      column(
        width = 3,
        # approach #3, but you don't see any custom logic here
        actionBttn(
          inputId = 'clear_ext_css',
          label = "Clear with external CSS",
          style = "gradient",
          color = "danger"
        )
      )


    )
  )
)

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

}

shinyApp(ui, server)

Answer 2

没有你的 .css 很难说，但你可以在这里找到一个示例