web-dev-qa-db-fra.com

Comment puis-je insérer une image dans la barre de navigation sur une barre de navigation brillante

Je suis en train de créer une application brillante utilisant une structure navbarPage(). Je voudrais insérer une image pour être sur le côté droit de l'écran, dans la barre de navigation. Cela ressemblerait à la barre de navigation en haut, par exemple, des sites stackoverflow, mais avec un logo à l'extrême droite. J'ai essayé:

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

Cependant, cela ne fait qu'afficher l'image dans l'extrême droite, sous la barre de navigation, au lieu du contenu du premier onglet (Remarque: l'image se trouve dans le répertoire www si nécessaire). 

Je peux utiliser l'argument icon=, mais cela met l'icône sur l'onglet du navigateur. 

Des idées sur la façon de mettre l'image sur la barre de navigation elle-même?

rshiny
21
John Paul

Je peux maintenant répondre à cette question, du moins pour 0.10.0 brillant. L'idée générale est de définir le title= sur une div() qui contient à la fois l'image et le texte du titre. 

Cela crée toutefois un nouveau problème en ce que l'argument icon= ne fonctionne plus et vous ne pouvez pas définir de titre pour la fenêtre. Pour résoudre ce problème, j'ai suivi le conseil d'Andy Singleton ici . Le conseil est de créer une fluidPage() au-dessus de la navbarPage() pouvant être utilisée pour contenir le titre et l'icône de la fenêtre. En faisant cette page 0 pixels de hauteur, il est caché sur l'application. Voici les bits de code clés.

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(....
23
John Paul

Ceci est basé sur @John Paul's answer mais me semble plus simple . Commencez par placer le titre de votre page dans une variable puisque nous l'utilisons deux fois - comme titre de la fenêtre et sur notre page:

PAGE_TITLE <- "My great title"

Ci-dessous dans votre page fluide: 

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

Pour ceux d'entre vous qui ont plus d'une image dans la barre de navigation, le title= ne fonctionnera que pour l'une des images, à moins que vous n'aimiez le formatage épouvantable. 

Ce code ci-dessous permet à l'utilisateur d'ajouter l'en-tête à une nouvelle image également hyperliée. Je l'ai utilisé pour créer un logo GitHub et lier mon référentiel. 

# 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 à </a></div>');NEEDS DOIT ÊTRE DANS UNE RANGÉE DE CODE DANS R 

Nous ne faisons que baliser cette section de code en tant que script HTML. Par conséquent, tout est transmis sous forme de chaîne de caractères à R et lu en tant que code HTML. Heureusement, nous pouvons changer la taille de l'image et la déplacer avec padding-left,right,top,bottom: _px. 

_ {Notez que container-fluid est ma barre de navigation, mais cela peut être différent pour votre application}. Des options de formatage supplémentaires peuvent être incluses dans la partie style du code. 

 enter image description here

Notez que vous pouvez également ajouter du texte et le lier de cette manière également. 

# 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>');
 )),

Encore une fois, assurez-vous que header.append à </div>'); se trouvent dans la même ligne de code dans R

3
Chabo

Voici une solution que j'ai faite sur la base des bonnes réponses précédentes:

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

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

L'emplacement pour l'enregistrement des images est le dossier "www" sur le serveur d'applications Shiny:

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