web-dev-qa-db-ja.com

R shiny：actionButtonにWebリンクを追加する

私の光沢のあるアプリケーションには、次のような光沢のあるダッシュボードボックス内にボタンが含まれているボックスがあります。

shiny::fluidRow(
  shinydashboard::box(title = "Intro Page", "Some description...", 
      shiny::actionButton(inputId='ab1', label="Learn More", icon = icon("th"))
  )
)

ボタンにWebリンクを含めて、ボタンをクリックすると、対応するWebページが新しいタブで開くようにします。

私は代わりにこれを行うことができることを知っています：

# this does not create a submit button though, it just creates a link.
tags$div(class = "submit",
         tags$a(href = "www.google.com", 
                "Learn More", 
                target="_blank")
)

しかし、actionButtonには、Niceボタンがあり、美しく見えるアイコンを追加できます。

enter image description here

光沢のあるactionButtonへのリンクを追加するにはどうすればよいですか？

htmlrhyperlinkaction-button
17
Komal Rathi

パラメータを追加できます

onclick ="location.href='http://google.com';"

アクションボタンにクリックして、現在のウィンドウでgoogle.comに移動するか、追加できます

onclick ="window.open('http://google.com', '_blank')"

新しいタブでGoogleに移動します

あれは

shiny::fluidRow(
  shinydashboard::box(title = "Intro Page", "Some description...", 
      shiny::actionButton(inputId='ab1', label="Learn More", 
                          icon = icon("th"), 
                          onclick ="window.open('http://google.com', '_blank')")
  )
)
29
Marsenau

onclickメソッドは単純ですが、JavaScriptに依存しています。さらに重要なことに、リンクを動的に生成したい場合は扱いにくくなります。ユーザーの入力に応じて特定のページを開くリンクをアプリに追加したいのですが、リンクをボタンのように見せることができます。

リンクはサーバー部分でのみ生成できるため、最初にuiOutputおよびrenderUIを使用して動的部分を扱います。シンプルなリンクは

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

この行をRで実行するだけで

<a target="_blank" href="http://www.somesite/somelink">
  <h4>Open Link</h4>
</a>

ボタンを作成するには、アクションボタンの外観を確認します。

> actionButton("download", "Download Selected",
              icon = icon("cloud-download"))
<button id="download" type="button" class="btn btn-default action-button">
  <i class="fa fa-cloud-download"></i>
  Download Selected
</button>

その後、これを行うことができます

shiny::a(h4("Open Link", class = "btn btn-default action-button" , 
    style = "fontweight:600"), target = "_blank",
    href = paste0("http://www.somesite/", some_link))

取得するため

<a target="_blank" href="http://www.somesite/some_link">
  <h4 class="btn btn-default action-button" style="fontweight:600">Open Link</h4>
</a>

これでボタンのようなリンクができました。スタイルパラメータまたはカスタマイズされたCSSを使用して、そのスタイルをさらにカスタマイズできます。 chrome/firefox開発者ツールでアプリを開き、CSSを必要な効果に変更してから、変更したCSSをwwwフォルダーのstyle.cssに追加して、デフォルトのスタイルを上書きします。

多くのhtmlタグ関数の出力を見ると、実際に多くのものを組み合わせて組み立て、多くのカスタマイズを行うことができます。

6
dracodoc

動的に生成されたリンクに関する@dracodocのポイントに基づいて、renderUIを使用して目的の効果を達成できます。以下の例では、input$open_tabは一般的なactionButtonを指します。 UIに以下のrenderUIへの参照を含める必要があることに注意してください（つまり、uiOutput（ "ui_open_tab"））

output$ui_open_tab <- renderUI({
  req(input$open_tab > 0)
  link <- function_to_build_the_link(a, b, c)
  tags$script(paste0("window.open('", link, "', '_blank')"))
})
0
Vincent