Comment puis-je insérer une image dans la barre de navigation sur une page de navigation brillante?()
je construis une application brillante en utilisant un navbarPage() mise en page. Je voudrais insérer une image sur le côté droit de l'écran, dans la barre de navigation. Il ressemblerait à la barre de navigation au sommet, 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 tout cela ne fait qu'afficher l'image dans l'extrême droite en dessous de la barre de navigation, au lieu du contenu du premier onglet (Note: l'image est dans le www répertoire, au besoin).
je peux utiliser le icon= argument, mais que placer l'icône sur l'onglet dans le navigateur.
avez-vous des idées pour mettre l'image sur la barre de navigation elle-même?
4 réponses
je peux maintenant répondre à cette question, au moins pour un 0.10.0. L'idée générale est de définir l' title=div() qui contient à la fois l'image et le texte pour le titre.
ceci cependant, crée un nouveau problème en ce que le icon= argument ne fonctionne plus, et vous ne pouvez pas définir un titre pour la fenêtre. Pour contourner cela, j'ai suivi les conseils D'Andy Singleton ici.Le conseil est de créer un fluidPage() au-dessus du navbarPage() qui peut être utilisé pour maintenir la fenêtre le titre et l'icône. En faisant cette page 0 pixels en hauteur, elle est cachée sur l'application. Voici les éléments clés du code.
interface utilisateur.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 @Jean-Paul réponse mais cela me semble plus simple. Mettez d'abord votre titre de page dans une variable puisque nous l'utiliserons deux fois -- comme le 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 une des images, sauf si vous aimez le formatage horrible.
Ce code ci-dessous permet à l'utilisateur d'ajouter l'en-tête avec une nouvelle image, c'est aussi des hyperliens. J'ai utilisé ceci pour créer un logo GitHub et lier mon dépôt.
# Create Right Side Logo/Image with Link
tags$script(HTML("var header = $('.navbar > .container-fluid');
header.append('<div style=\"float:right\"><a #THESE THREE
href=\"URL\"><img src=\"Logo.png\" alt=\"alt\" style=\"float:right; width:33px; #IN
height:41px;padding-top:10px;\"> </a></div>'); #SAME LINE
console.log(header)")
),
header.append</a></div>');DOIT ÊTRE DANS UNE RANGÉE DE CODE DANS R
Tout ce que nous faisons est de marquage ce section de code comme le script HTML, donc tout est passé comme une chaîne de caractères à R, et lu comme le code HTML. Heureusement nous pouvons changer la taille de l'image, et la déplacer en utilisant padding-left,right,top,bottom: _px.
Notez que container-fluid mon nav-bar, mais il 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 lien de cette manière.
# 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>');
console.log(header)"
)),
Encore une fois assurez-vous que header.append</div>'); sont dans la même ligne de code dans R
ui <-
fluidPage(
list(
tags$head(
HTML('<link rel="icon" href="favicon.png"
type="image/png" />'))),
navbarPage("App user name", windowTitle = "App name",
...
l'endroit pour sauvegarder des images est le dossier "www" sur le serveur app brillant:
shinyApp/app.R
shinyApp/www/favicon.png