Saltar al contenido

Agregar una imagen al botón de acción Shiny

Hola usuario de nuestro sitio, hemos encontrado la solución a lo que estabas buscando, desplázate y la obtendrás aquí.

Solución:

Eso es bastante fácil con el argumento. icon de la función actionButton():

actionButton("goButton", "", icon = icon("play-circle"))

Alternativamente, puede usar la función icon() para agregar un ícono a su código de botón:

tags$button(
          id = "reset_button",
          class="btn action-button",
          icon("close")

        )

O usas el img() Función para usar la tuya:

    tags$button(
      id = "web_button",
      class = "btn action_button",
      img(src = "http://www.craftech.com/wp-uploads/2015/05/web.png",
               height = "50px")
    )

Para obtener una lista más completa de posibles íconos, eche un vistazo a ?icon página de ayuda del shiny paquete y los enlaces en el See Also sección.

Una aplicación de ejemplo:

shinyApp(
  ui = shinyUI(
    fluidPage(
      fluidRow(
        actionButton("goButton", "", icon = icon("play-circle")),
        tags$button(
          id = "reset_button",
          class="btn action-button",
          icon("close")

        ),
        tags$button(
          id = "web_button",
          class = "btn action-button",
          tags$img(src = "http://images.all-free-download.com/images/graphicthumb/button_play_89677.jpg",
                   height = "50px")
        )
      ),
      fluidRow(
        textOutput("text")
      )
    )
  ),
  server = function(input, output, session)
    out <- reactiveVal("Nothing")
    observeEvent(input$goButton,
      out("Go Pushed")
    )
    observeEvent(input$reset_button,
      out("Resetted")
    )
    observeEvent(input$web_button,
      out("From the web")
    )
    output$text <- renderText(out())
  
)

Aquí hay otra solución simple que funcionó para mí:

actionButton(inputId = "A.button", label = NULL, style = "width: 50px; height: 50px;
background: url('MyImage.png');  background-size: cover; background-position: center;")

la imagen debe estar en la carpeta www dentro de la carpeta de la aplicación, el tamaño de fondo en este caso se ajusta a la imagen al tamaño del botón, alternativamente puede usar background-repeat: no-repeat; para asegurarse de que la imagen no se repita hasta llenar el tamaño, el centro del centro debe centrar la imagen vertical y horizontalmente.

En principio, también se podría poner la imagen como etiqueta, como:

label = img (src="MyImage.png", width="30", height="30"),

Sin embargo, entonces la imagen podría sobresalir por el borde del botón en comparación con insertarla como fondo.

Sección de Reseñas y Valoraciones

Si te mola la invitación, puedes dejar una reseña acerca de qué le añadirías a este post.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)


Tags : / /

Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *