css - 调整窗口大小时，使简化样式的 fileInput 行为类似于下载按钮

Question

我设法减小了 fileInput 函数的大小，删除了上传区域和加载栏，因此使按钮看起来非常类似于 downloadButton。但是，我正在努力弄清楚我需要更改 CSS 的哪一部分，以使其在缩小窗口时以与下载按钮相同的方式使用react。任何帮助将不胜感激。

当 sidebarPanel 足够宽时:

当 sidebarPanel 不够宽时:

代码在这里(我在调整后的 fileInput 中留下了我注释掉的位，以防需要使用它们):

library(shiny)

fileInputNoExtra<-function(inputId, label, multiple = FALSE, accept = NULL, width = NULL, buttonLabel = "Browse...", placeholder = "No file selected"){
  restoredValue <- restoreInput(id = inputId, default = NULL)
  if (!is.null(restoredValue) && !is.data.frame(restoredValue)) {
    warning("Restored value for ", inputId, " has incorrect format.")
    restoredValue <- NULL
  }
  if (!is.null(restoredValue)) {
    restoredValue <- toJSON(restoredValue, strict_atomic = FALSE)
  }
  inputTag <- tags$input(id = inputId, name = inputId, type = "file", 
                         style = "display: none;", 
                         `data-restore` = restoredValue)
  if (multiple) 
    inputTag$attribs$multiple <- "multiple"
  if (length(accept) > 0)
    inputTag$attribs$accept <- paste(accept, collapse = ",")
  # div(class = "form-group shiny-input-container", style = if (!is.null(width)) 
  # paste0("width: ", validateCssUnit(width), ";"), #label %AND% 
  # tags$label(label), 
  #div(class = "input-group", 
  tags$label(class = "input-group-btn", type="button", style=if (!is.null(width)) paste0("width: ", validateCssUnit(width),";","padding-right: 5px; padding-bottom: 5px;"),
             span(class = "btn btn-default btn-file",type="button", buttonLabel, inputTag, style=if (!is.null(width)) paste0("width: ", validateCssUnit(width),";","border-radius: 5px; padding-bottom: 5px;"))
  )#, 
  #tags$label(class = "input-group-btn", type="button", span(class = "btn btn-default", buttonLabel, inputTag))#, 
  #tags$input(type = "text", class = "form-control", placeholder = placeholder, readonly = "readonly")
  #)
  # tags$div(id = paste(inputId, "_progress", sep = ""), class = "progress progress-striped active shiny-file-input-progress", tags$div(class = "progress-bar"))
  # )
}

ui <- fluidPage(sidebarLayout(
  sidebarPanel(
    fileInputNoExtra("test1",label="",accept=".lmmm",buttonLabel=list(icon("folder"),"Normal upload button1"),width="200px"),
    fileInputNoExtra("test2",label="",accept=".lmmm",buttonLabel=list(icon("folder"),"Normal upload button2"),width="200px"),
    downloadButton("test3",label="Normal download button3"),
    downloadButton("test4",label="Normal download button4")
  ),
  mainPanel()

))


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

}

shinyApp(ui = ui, server = server)

Answer 1

你快到了。您只需要将 display: inline-block 添加到 class = "input-group-btn"。所以 fileInputNoExtra 看起来像这样:

fileInputNoExtra<-function(inputId, label, multiple = FALSE, accept = NULL, width = NULL, buttonLabel = "Browse...", placeholder = "No file selected"){

  restoredValue <- restoreInput(id = inputId, default = NULL)
  if (!is.null(restoredValue) && !is.data.frame(restoredValue)) {
    warning("Restored value for ", inputId, " has incorrect format.")
    restoredValue <- NULL
  }
  if (!is.null(restoredValue)) {
    restoredValue <- toJSON(restoredValue, strict_atomic = FALSE)
  }
  inputTag <- tags$input(id = inputId, name = inputId, type = "file", 
                         style = "display: none;", 
                         `data-restore` = restoredValue)
  if (multiple) 
    inputTag$attribs$multiple <- "multiple"
  if (length(accept) > 0)
    inputTag$attribs$accept <- paste(accept, collapse = ",")

  tags$label(class = "input-group-btn", type="button", style=if (!is.null(width)) paste0("width: ", validateCssUnit(width),";","padding-right: 5px; padding-bottom: 5px; display: inline-block;"),
             span(class = "btn btn-default btn-file",type="button", buttonLabel, inputTag, style=if (!is.null(width)) paste0("width: ", validateCssUnit(width),";","border-radius: 5px; padding-bottom: 5px;"))
  )
} 

通过此修改，您将获得以下输出:

和

希望对您有所帮助!