html - R Shiny : How to insert html link in a material_button

Question

当我点击一个按钮时，我想打开一个 html 链接，一个来自 shinymaterial 包的“ Material 按钮”

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 代码，则还有另一种方法。

我回答了a similar question before ，这实际上是一个通用的方法，可以解决很多不同的问题。

首先我们来看什么是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 类，使其看起来像一个 Material 按钮:

> 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 class 值，因此您需要使用其中的特定值。

2. action button 有一个 id 可以用于事件观察器，但是对于链接按钮你通常不需要它，因为行为只是打开一个链接。

自定义 Shiny 应用程序视觉外观的另一个提示:

1. 在浏览器中运行 Shiny 应用，在 Chrome/firefox 中打开开发者工具
2. 找到您要更改的元素的 css，进行试验，直到您满意为止
3. 将其保存在 www 文件夹下的 css 文件中，使用 includeCSS("www/styles.css") 将其包含在 UI 代码中。