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?
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(....
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
)
),
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.
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
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