R Flexdashboard中的DownloadButton宽度

时间:2019-03-25 19:57:43

标签: r shiny flexdashboard

我在更改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>

1 个答案:

答案 0 :(得分:1)

实际上,在玩过此游戏后,我建议将uiOutputrenderUI一起使用。

如果不使用uiOutput,则downloadButton函数将被忽略(仅对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)
  }
)
```

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

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

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

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

在这种情况下,应用程序尝试读取与styles.css相同的文件夹中名为Rmd的文件。

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

#downBtn {
  width: 100%;
}

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

输出:

output

相关问题