tamaño - ¿Cómo puedo insertar una imagen en la barra de navegación en una página de navegación brillante?

insertar imagen html url

Question

Estoy creando una aplicación brillante utilizando un diseño navbarPage() . Me gustaría insertar una imagen para que esté en el lado derecho de la pantalla, en la barra de navegación. Se vería como la barra de navegación en la parte superior de, por ejemplo, los sitios de stackoverflow, pero con un logotipo en el extremo derecho. Yo he tratado:

shinyUI(
   navbarPage (title="test Page" ,
      img(src="mylogo.gif", style="float:right; padding-right:25px"),
      tabPanel(title="Panel 1",...)
 ))

Sin embargo, todo esto es mostrar la imagen en el extremo derecho debajo de la barra de navegación, en lugar del contenido de la primera pestaña (Nota: la imagen está en el directorio www , según sea necesario).

Puedo usar el argumento icon= , pero eso puso el icono en la pestaña del navegador.

¿Alguna idea sobre cómo colocar la imagen en la barra de navegación?

Answer 1

Ahora puedo responder a esta pregunta, al menos para el brillante 0.10.0. La idea general es establecer el title= a un div() que contenga tanto la imagen como el texto del título.

Sin embargo, esto crea un nuevo problema porque el argumento icon= ya no funciona y no puede establecer un título para la ventana. Para fluidPage() esto, seguí el consejo de Andy Singleton here . El consejo es crear una fluidPage() sobre la navbarPage() que se puede usar para mantener el título y el ícono de la ventana. Al hacer que esta página tenga 0 píxeles de altura, se oculta en la aplicación. Aquí están los bits clave del código.

ui.r:

shnyUI(
  fluidPage(
     list(tags$head(HTML(''<link rel="icon", href="MyIcon.png", 
                                   type="image/png" />''))),
     div(style="padding: 1px 0px; width: ''100%''",
         titlePanel(
                title="", windowTitle="My Window Title"
         )
      ),
      navbarPage(
         title=div(img(src="myLogo.gif"), "My Title in the Navbar"),
         tabPanel(....

Answer 2

Aquí está una solución que hice basada en las grandes respuestas anteriores:

 ui <- 
   fluidPage(  
       list(
         tags$head(
           HTML(''<link rel="icon" href="favicon.png" 
                type="image/png" />''))),

    navbarPage("App user name", windowTitle = "App name",
    ...

El lugar para guardar imágenes es la carpeta "www" en el servidor de aplicaciones Shiny:

shinyApp/app.R
shinyApp/www/favicon.png

Answer 3

Esto se basa en la answer @John Paul, pero me parece más simple. Primero ponga el título de su página en una variable, ya que la usaremos dos veces, como título de la ventana y en nuestra página:

PAGE_TITLE <- "My great title"

Abajo en tu página fluida:

  titlePanel(windowTitle = PAGE_TITLE,
             title =
               div(
                 img(
                   src = "my_logo.png",
                   height = 100,
                   width = 100,
                   style = "margin:10px 10px"
                 ),
                 PAGE_TITLE
               )
             ),

Answer 4

Para aquellos de ustedes que tienen más de una imagen en la barra de navegación, el title= solo funcionará para una de las imágenes, a menos que le guste un formato horrible.

Este código a continuación le permite al usuario agregar el encabezado con una nueva imagen que también está hipervinculada. Utilicé esto para crear un logotipo de GitHub y vincular mi repositorio.

# Create Right Side Logo/Image with Link       
tags$script(HTML("var header = $(''.navbar > .container-fluid'');
header.append(''<div style=/"float:right/"><ahref=/"URL/"><img src=/"Logo.png/" alt=/"alt/" style=/"float:right;width:33px;height:41px;padding-top:10px;/"> </a>`</div>'');
    console.log(header)")
    ),

header.append through </a></div>''); NECESITA ESTAR EN UNA FILA DE CÓDIGO EN R

Todo lo que estamos haciendo es etiquetar esta sección de código como secuencia de comandos HTML, por lo tanto, todo se pasa como una cadena de caracteres a R y se lee como código HTML. Afortunadamente, podemos cambiar el tamaño de la imagen y moverla con el padding-left,right,top,bottom: _px .

Tenga en cuenta que el container-fluid es mi barra de navegación, pero puede ser diferente para su aplicación . Se pueden incluir opciones de formato adicionales en la parte de estilo del código.

Tenga en cuenta que también puede agregar texto y vincularlo de esta manera también.

# Create Right Side Text
 tags$script(HTML("var header = $(''.navbar > .container-fluid'');
 header.append(''<div style=/"float:right/"><h3>Follow us on GitHub</h3></div>'');
 )),

De nuevo, asegúrese de que header.append through </div>''); están en la misma línea de código en R