2016-06-13 18 views
7

Ho una scatola nella mia applicazione lucido che ha un pulsante inserito all'interno di una scatola di dashboard lucido come questo:R lucido: Aggiungere link web per ActionButton

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

voglio includere un link web nel pulsante in modo che quando Lo clicco, dovrebbe aprire la pagina web corrispondente in una nuova scheda.

So che posso fare questo, invece:

# 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") 
) 

Ma con ActionButton, c'è un pulsante bello e posso aggiungere un'icona ad essa che sembra esteticamente migliore.

enter image description here

Come faccio ad aggiungere un link ad ActionButton a lucido?

risposta

12

È possibile aggiungere il parametro

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

Per il pulsante di azione e clic su di esso vi porterà a google.com nella finestra corrente oppure è possibile aggiungere

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

e sarete presi a Google in una nuova scheda

Questo è

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')") 
) 
) 
+0

Wow!Ha funzionato! Non sono riuscito a trovare una risposta da nessuna parte quando ho cercato su Google, lieto di averlo postato come domanda qui. Molte grazie! –

3

Il metodo onclick è semplice ma si basa su javascript. Ancora più importante, sarà imbarazzante se si desidera generare il collegamento in modo dinamico. Voglio avere un link nella mia app che apra una pagina specifica in base all'input dell'utente, e ho scoperto che puoi semplicemente vestire un link come un pulsante.

Prima di tutto mi occupo della parte dinamica con uiOutput e renderUI, perché il collegamento può essere generato solo nella parte server. Il collegamento semplice sarà

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

basta eseguire questa linea in R otteniamo

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

Per creare un pulsante che possiamo guardare a ciò che un pulsante di azione assomigliare.

> 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> 

allora possiamo fare questo

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

per ottenere

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

Ora abbiamo un link che assomiglia ad un tasto, ed è possibile personalizzare ulteriormente il suo stile sia con parametro di stile o css personalizzato. Apri la tua app con gli strumenti di sviluppo chrome/firefox, modifica il css sull'effetto desiderato, quindi aggiungi il css modificato a style.css nella cartella www per sovrascrivere lo stile predefinito.

Se si guarda l'output di molte funzioni di tag html, si scoprirà che è possibile combinare e assemblare molte cose insieme per ottenere molte personalizzazioni.