Shinydashboard 使下载按钮变灰？

Posted 2023-03-24

【中文标题】Shinydashboard 使下载按钮变灰？

【英文标题】：Shinydashboard grayed out downloadButton?

【发布时间】：2016-07-18 19:23:06

【问题描述】：

如何修复这个简单示例中的下载按钮？

library(shiny)
library(shinydashboard)
library(shinyjs)
header <- dashboardHeader()

sidebar <- dashboardSidebar(shinyjs::useShinyjs(),  
                            actionButton("start_proc", "Click to make download button appear"),
                            p(),
                            downloadButton('data_file', 'Download'))

body <- dashboardBody()

ui <- dashboardPage(header, sidebar, body)


server <- function(input, output) 

  observe(
    if (input$start_proc > 0) 
      Sys.sleep(1)
      # enable the download button
      shinyjs::show("data_file")
    
  )

  output$data_file <- downloadHandler(
    filename = function() 
      paste('data-', Sys.Date(), '.csv', sep='')
    ,
    content = function(file) 
      write.csv(data.frame(x=runif(5), y=rnorm(5)), file)
    
  )
  # disable the downdload button on page load
  shinyjs::hide("data_file")


shinyApp(ui, server)

【参考方案1】：

看起来您放置在侧边栏中的任何下载按钮都是这样的（与它使用隐藏/显示的事实无关）。如果您只是将按钮移动到正文而不是侧边栏，它看起来又正常了，如果您向侧边栏添加更多按钮，它们也会变灰。所以这告诉我们这可能与 CSS 有关。

如果你查看按钮的 CSS，你会看到规则

.skin-blue .sidebar a 
    color: #b8c7ce;

所以看起来有人（无论是闪亮的还是引导程序，我不确定谁负责这个 CSS 文件）故意制作链接（下载按钮实际上只是一个样式不同的链接）灰色文本。所以你可以通过添加自己的 CSS 来解决这个问题，比如

tags$style(".skin-blue .sidebar a  color: #444; ")

【讨论】：

谢谢！此外，tags$style(".skin-blue .sidebar .shiny-download-link color: #444; ") 也适用于专门针对downloadButton 的shiny-download-link 类。 a 元素导致侧边栏中的其他元素改变行为