【问题标题】:DownloadButton width in R FlexdashboardR Flexdashboard中的下载按钮宽度
【发布时间】:2019-08-16 03:34:08
【问题描述】:

我在更改我的 DownloadButton 宽度时遇到问题,因为他与 actionButton(具有 width 参数)不同。

有什么简单的方法可以解决吗? 这是我的代码(只是一个简单的下载按钮):

Normalidade  
=======================================================================
Inputs {.sidebar}
-----------------------------------------------------------------------
<h5>
```{r}
tags$hr()


downloadButton("downloadNormal",label = "Download seu teste", class = "butt1")


downloadHandler(
    filename = "Resultados_Normal.csv",

    content = function(file) {
      write.csv(data, file)
    }

    )

tags$hr()
tags$br()
actionButton("AjudaNormal", label = " Ajuda", icon("question-circle"),
             width = "100%",
             onclick="window.open('http://google.com', '_blank')")


```
</h5>

【问题讨论】:

  • 您可以使用style 参数应用自定义css,例如:downloadButton("id", "Label", style = "width:300px;")
  • 没用,什么也没发生。还有其他想法吗? label 参数也一样,不管我放哪个名字,按钮总是为用户显示“下载”。也许是因为我使用的是 flexdashboard?
  • 你说得对,它确实不适用于 Flexdashboard。尝试添加以下 CSS 规则:.shiny-download-link {width: 100%;}。如果需要,有关添加 CSS 的信息:link
  • 我是新手,所以不要生气哈哈哈。但我不明白我应该如何放置这个规则,比如: flexdashboard::flex_dashboard: css: style.shiny-download-link {width: 100%;}
  • 对事物不熟悉没有问题 :) 我写了一个答案,测试一下,如果您需要任何帮助,请告诉我。

标签: r shiny flexdashboard


【解决方案1】:

实际上,在玩过这个之后,我建议使用uiOutputrenderUI

如果不使用uiOutputdownloadButton 函数会被忽略(只有downloadHandler 会被评估),这就是为什么没有设置width 参数,而且你也不能修改按钮的标签。

使用uiOutput可以解决所有问题。

---
title: "Full width downloadButton"
output: 
  flexdashboard::flex_dashboard:
    css: styles.css
runtime: shiny
---

```{r setup, include=FALSE}
library(flexdashboard)
```

Inputs {.sidebar}
-----------------------------------------------------------------------

```{r}
# Create placeholder for the downloadButton
uiOutput("downloadUI")
```

```{r}
# Create the actual downloadButton
output$downloadUI <- renderUI( {
  downloadButton("downBtn", "Download Iris data", style = "width:100%;")
})

# Add download handling
output$downBtn <- downloadHandler(
  filename = function() {
    "iris.csv"
  },
  content = function(file) {
    write.csv(iris, file, row.names = FALSE)
  }
)
```

我使用带有 style 参数的 inlineCSS 设置 width,但如果您有多个 CSS 规则,您可以(并且应该)使用外部样式表。

使用外部样式表(CSS 文件)

通过将css: path/filename.css 添加到 YAML 标头,可以在 Flexdashboard 中使用外部 CSS 文件。

---
title: "Full width downloadButton"
output: 
  flexdashboard::flex_dashboard:
    css: styles.css
runtime: shiny
---

在这种情况下,应用会尝试读取与 Rmd 位于同一文件夹中的名为 styles.css 的文件。

在同一个文件夹中创建css文件并添加规则:

#downBtn {
  width: 100%;
}

您现在可以从 downloadButton 中删除 style = "width:100%;" 并仍然获得全宽按钮。

输出:

【讨论】:

  • 工作!你是我的天使哈哈哈我也想出了如何添加一个类,因为我会有大量的下载按钮,并且为每个人添加 ID 样式会很无聊。真的有帮助!
  • 这是我获得downloadButtonruntime: shiny_prerendered工作的唯一方法
猜你喜欢
  • 2020-12-02
  • 1970-01-01
  • 2022-01-12
  • 2019-12-25
  • 2016-09-27
  • 2017-08-09
  • 2023-02-19
  • 2011-07-24
  • 1970-01-01
相关资源
最近更新 更多