ShinyWidgets中与shinySaveButton功能等效的组件是什么？

嘿，这个问题我之前也纠结过！毕竟shinyWidgets的按钮颜值确实高，但shinySaveButton的功能又太实用了，不想放弃。其实有两种简单的方法能解决这个外观不协调的问题，给你分享一下：

方法1：用actionBttn触发原生保存对话框 #

这种方法完全保留actionBttn的美观外观，同时通过shiny的showSaveDialog()函数实现和shinySaveButton一模一样的文件保存逻辑，代码写起来也很顺手：

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  # 你的高颜值actionBttn
  actionBttn(
    inputId = "save", 
    label = "Save", 
    size="sm", 
    color = "primary", 
    style = "gradient", 
    icon = icon("save"), 
    block = FALSE
  )
)

server <- function(input, output, session) {
  observeEvent(input$save, {
    # 弹出和shinySaveButton一样的保存对话框
    selected_file <- showSaveDialog(
      title = "Save file as ...",
      filetype = list(csv="csv")
    )
    
    # 用户选择了文件才执行保存逻辑
    if (!is.null(selected_file)) {
      # 这里替换成你要保存的内容，比如数据框、图片等
      write.csv(mtcars, file = selected_file)
      # 可选：保存成功后给个提示
      showNotification("文件保存成功啦！", type = "message")
    }
  })
}

shinyApp(ui, server)

这个方案的好处是：你可以随意调整actionBttn的样式（比如size、color、style参数），完全和其他shinyWidgets组件保持一致，同时保存功能和shinySaveButton一样完整。

方法2：给shinySaveButton套上actionBttn的样式 #

如果你更习惯用原生的shinySaveButton写法，也可以通过自定义CSS让它看起来和actionBttn一模一样。下面是模仿actionBttn的gradient primary风格的示例：

library(shiny)

ui <- fluidPage(
  # 自定义CSS，完全复刻actionBttn的样式
  tags$style(HTML("
    .actionbttn-style-save {
      background-image: linear-gradient(180deg,#007bff,#0069d9);
      border-color: #0062cc;
      color: #fff;
      padding: 0.25rem 0.5rem;
      font-size: 0.875rem;
      border-radius: 0.2rem;
      border: 1px solid transparent;
      cursor: pointer;
      transition: all 0.2s ease-in-out;
    }
    .actionbttn-style-save:hover {
      background-image: linear-gradient(180deg,#0069d9,#005cbf);
      border-color: #0056b3;
      transform: translateY(-1px);
    }
  ")),
  # 给shinySaveButton添加自定义样式类
  shinySaveButton(
    "save", 
    "Save file", 
    "Save file as ...", 
    filetype=list(csv="csv"),
    class = "actionbttn-style-save"
  )
)

server <- function(input, output, session) {
  observeEvent(input$save, {
    if (!is.null(input$save)) {
      write.csv(mtcars, file = input$save)
      showNotification("文件保存成功！", type = "message")
    }
  })
}

shinyApp(ui, server)

你可以根据actionBttn的不同参数（比如size="lg"或者color="danger"）调整CSS里的padding、font-size、颜色值等，让它完美匹配你的其他组件。

两种方法都能解决外观不协调的问题，你可以根据自己的编码习惯选一个就行～

内容的提问来源于stack exchange，提问作者armtar