R блестящий: Добавить веб-ссылку на actionButton

У меня в блестящем приложении есть коробка, в которой есть кнопка, включенная в блестящую панель инструментов:

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

Я хочу включить веб-ссылку в кнопку, чтобы при нажатии на нее открывалась соответствующая веб-страница в новой вкладке.

Я знаю, что могу сделать это вместо этого:

# 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 есть хорошая кнопка, и я могу добавить к ней иконку, которая выглядит эстетически лучше.

Как мне добавить ссылку на actionButton в блестящем?

Источник

4 ответа

Решение

Вы можете добавить параметр

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')")
  )
)
Источник

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>

Теперь у нас есть ссылка, похожая на кнопку, и вы можете дополнительно настроить ее стиль с помощью параметра style или настроенного CSS. Откройте свое приложение с помощью инструментов разработчика Chrome / Firefox, измените CSS так, как вам нужно, затем добавьте измененный CSS в style.css в папке www, чтобы переопределить стиль по умолчанию.

Если вы посмотрите на вывод многих функций html-тегов, вы обнаружите, что вы действительно можете комбинировать и собирать множество вещей вместе, чтобы получить множество настроек.

Источник

Я хотел объединить несколько вопросов/ответов с моим собственным воспроизводимым примером. Это сочетает в себе ответ Марсенау, дракодока и Винсента. И отвечает на комментарий Капитана Шляпы.

Решение для динамической ссылки

Сторона пользовательского интерфейса

      uiOutput("ui_open_tab_button")

На стороне сервера (где input$slider является примером динамического элемента)

      output$ui_open_tab_button <- renderUI({
      shiny::a(
        h4(icon("th"),
           paste0("Wiki Link Number: ",input$slider),
           class = "btn btn-default action-button",
           style = "fontweight:600"),
        target = "_blank",
        href = paste0("https://en.wikipedia.org/wiki/",input$slider)
  )
  })

Полный пример

      library("shiny")
library("shinydashboard")

ui <- dashboardPage(
  dashboardHeader(title = "Basic dashboard"),
  dashboardSidebar(
    sliderInput("slider", "Wiki Link Control", 1, 10, 1)
  ),
  dashboardBody(
      box(title = "UI Only Link", p("From Marsenau... Uses onclick"),
          actionButton(
            inputId='ab2',
            label="Wiki Main Link",
            icon = icon("th"),
            onclick=paste0("window.open('https://en.wikipedia.org/wiki/','_blank')")
          )
          ),
      box(title = "Dynamic link", p("From dracodoc and Vincent... answers Captain Hat's question"),
          uiOutput("ui_open_tab_button")
    ),
    fluidRow(
      htmlOutput("wiki")
    )
  )

)


server <- function(input, output) {
  output$ui_open_tab_button <- renderUI({
      shiny::a(
        h4(icon("th"),
           paste0("Wiki Link Number: ",input$slider),
           class = "btn btn-default action-button",
           style = "fontweight:600"),
        target = "_blank",
        href = paste0("https://en.wikipedia.org/wiki/",input$slider)
  )
  })
  output$wiki <- renderUI({
    tags$iframe(src=paste0("https://en.wikipedia.org/wiki/",input$slider), height=1000, width="100%")
  })
}

shinyApp(ui, server,  options = list(launch.browser=T))
Источник

Опираясь на точку зрения @dracodoc о динамически генерируемых ссылках, вы можете использовать renderUIдля достижения желаемого эффекта. В приведенном ниже примереinput$open_tabотносится к универсальному actionButton. Обратите внимание, что вам все равно нужно включить ссылку на 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')"))
})
Источник
Другие вопросы по тегам