R shiny:如何在material_button中插入html链接

Question

当我点击一个按钮时,我想打开一个html链接,这是一个来自shinymaterial包的"材料按钮"

library(shiny)
library(shinymaterial)

ui <- material_page(
   title = "page",
   material_button(
    input_id = "button1",
    label = "label1",
    color = "blue"
  )

server <- function(input, output) {
  }
shinyApp(ui = ui, server = server)

我可以 :

label = a("label1",href="my link",target="_blank")

但是只有当我点击按钮的标签时它才有效.我可以在shinyapp的服务器部分添加我的链接吗？

Answer 1

你可以随时使用Javascript,但如果你知道所有这些Shiny UI都只是html代码,还有另一种方法.

我之前回答过类似的问题,这实际上是一种可以解决许多不同问题的通用方法.

首先我们来看看什么是material button:

> material_button(
+     input_id = "button1",
+     label = "label1",
+     color = "blue"
+   )
<button class="waves-effect waves-light btn shiny-material-button blue" id="button1" value="0">label1</button>

所有Shiny UI函数只生成带有一些属性的html代码,您可以在控制台中运行它们以查看结果,这是一种简单的实验方法.

如果你看?shiny::actionButton,有actionButton和actionLink.有什么不同？

> shiny::actionButton("test", "button")
<button id="test" type="button" class="btn btn-default action-button">button</button>
> shiny::actionLink("test", "button")
<a id="test" href="#" class="action-button">button</a>

我们可以创建一个带按钮外观的链接,而不是在按钮中插入链接.

如果您知道html代码应该如何用于您的目的,您可以使用所有Shiny html标记函数.现在我们想要一些文本,一个目标,一些css类的链接.

Shiny中的动态链接可以像这样创建:

a(h4("Open Link"), target = "_blank", href = paste0("http://www.somesite/", some_link))

请注意,这不是创建链接的最简单方法.我使用这种格式是因为我希望能够在服务器代码中动态生成链接.此示例可以为您提供有关如何组合不同html标记函数的一些提示:

1. 总的来说,它是一个链接,所以我们a在最外层使用
2. 您可以使用任何格式来显示我使用的文本/标签,h4这可能会被css覆盖,但这会给你一个想法
3. 您可以动态生成属性

然后我们只需要将适当的css类应用于它,使其看起来像一个材质按钮:

> shiny::a(h4("Open Link", class = "waves-effect waves-light btn shiny-material-button blue" , id = "button1",
+               style = "fontweight:600"), target = "_blank",
+            href = paste0("http://www.somesite/", "some_link"))
<a target="_blank" href="http://www.somesite/some_link">
  <h4 class="waves-effect waves-light btn shiny-material-button blue" id="button1" style="fontweight:600">Open Link</h4>
</a>

注意我使用了完全限定名称shiny::a,否则有时会出现一些短html标记函数名称的警告.我还添加了一个style在这种情况下可能不需要的属性,但这是进行进一步自定义的一种简单方法.

注意:

1. color参数可能会更改css类值,因此您需要使用该特定值.

2. 动作按钮有一个可以用于事件观察者的id,但对于链接按钮,你通常不需要它,因为行为只是打开一个链接.

另一个提示定制Shiny app视觉外观:

1. 在浏览器中运行Shiny应用程序,在Chrome/firefox中打开开发人员工具
2. 找到你想要改变的元素的css,试验它直到你对它感到满意为止
3. 将其保存在文件www夹下的css文件中,将其包含在UI代码中includeCSS("www/styles.css").