R光沢：私は行うことができますどのように私はボタンをクリックしたときにHTMLリンクを開きたいmaterial_button

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のサーバー部分に自分のリンクを追加することはできますか？

がidで要素を検索し、 onlickリスナーを追加します。それは materialButton()のための引数として渡すことが傾けるようだとして

Answer 1

ので、代わりにあなたはjavascriptを経由して、それを自分で追加することができます。

library(shiny) 
library(shinyjs) 
library(shinymaterial) 

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

server <- function(input, output) { 
    runjs("document.getElementById('button1').onclick = function() { 
      window.open('http://stackoverflow.com/', '_blank'); 
     };" 
) 
} 
runApp(shinyApp(ui = ui, server = server), launch.browser = TRUE) 

Answer 2

いつも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> 

すべての光沢のある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クラスのリンクが必要になりました。

シャイニーの動的リンクは次のように作成することができます。

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

（注）このリンクを作成する最も簡単な方法ではありません。私はサーバーコードで動的にリンクを生成できるようにしたいので、この形式を使用しました。この例ではあなたに別のhtmlタグの機能を組み合わせるする方法についていくつかのヒントを与えることができます。

全体の

1. 私たちは、あなたがテキスト/ラベルを表示するために、任意の形式を使用することができます
2. 最外層にaを使用するので、それは私が使用し、リンクですh4、おそらくCSSで上書きすることが、これは動的

はその後、我々はちょうどそれのように見えるように、それに適切な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. あなたはそれから特定の値を使用する必要があるので、色のパラメータは、CSSクラス値を変更することがあります。

2. アクションボタンはイベントオブザーバに使用できるIDを持っていますが、通常はリンクを開くだけなので、通常はそのボタンは必要ありません。

シャイニーアプリ外観カスタマイズするためのもう一つのヒント：ブラウザで光沢のあるアプリケーションを実行

1. を、クローム/ Firefoxの
に開発ツールをオンに
2. を変更したい要素のCSSを見つけますあなたがそれに満足するまでそれを試してください
3. フォルダの下のCSSファイルに保存し、UIコードにincludeCSS("www/styles.css")を含めてください。