Come posso inserire un’immagine nella barra di navigazione su una navbarPage lucida ()

Sto navbarPage() un’applicazione lucida usando un layout navbarPage() . Vorrei inserire un’immagine per essere sul lato destro dello schermo, nella barra di navigazione. Sembrerebbe la barra di navigazione nella parte superiore, ad esempio, dei siti StackOverflow, ma con un logo all’estrema destra. Ho provato:

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

Tuttavia, tutto ciò avviene visualizzando l’immagine nell’estrema destra sotto la barra di navigazione, invece del contenuto della prima scheda (Nota: l’immagine si trova nella directory www come richiesto).

Posso usare l’ icon= argomento, ma che mette l’icona nella scheda nel browser.

Qualche idea su come mettere l’immagine sulla barra di navigazione stessa?

Ora posso rispondere a questa domanda, almeno per lo splendente 0.10.0. L’idea generale è di impostare il title= su un div() che contiene sia l’immagine che il testo per il titolo.

Questo, tuttavia, crea un nuovo problema in quanto l’argomento icon= non funziona più e non è ansible impostare un titolo per la finestra. Per fluidPage() questo ho seguito il consiglio di Andy Singleton. Il consiglio è di creare una pagina di fluidPage() sopra la pagina di navbarPage() che può essere utilizzata per contenere il titolo e l’icona della finestra. Rendendo questa pagina di 0 pixel in altezza, è nascosta nell’app. Ecco i bit chiave del codice.

ui.r:

 shnyUI( fluidPage( list(tags$head(HTML(''))), 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(.... 

Questo è basato sulla risposta di @John Paul, ma mi sembra più semplice. Per prima cosa metti il ​​titolo della tua pagina in una variabile dato che lo useremo due volte – come titolo della finestra e sulla nostra pagina:

 PAGE_TITLE <- "My great title" 

Sotto nella tua pagina fluida:

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

Per quelli di voi che hanno più di un’immagine nella barra di navigazione, il title= funzionerà solo per una delle immagini, a meno che non vi piaccia la formattazione orrenda.

Questo codice di seguito consente all’utente di aggiungere l’intestazione con una nuova immagine anch’essa con collegamenti ipertestuali. L’ho usato per creare un logo GitHub e colbind il mio repository.

 # Create Right Side Logo/Image with Link tags$script(HTML("var header = $('.navbar > .container-fluid'); header.append(''); #SAME LINE console.log(header)") ), 

header.append attraverso '); NECESSITÀ DI ESSERE IN UNA RIGA DI CODICE IN R

Tutto quello che stiamo facendo è codificare questa sezione di codice come script HTML, quindi tutto viene passato come stringa di caratteri a R e letto come codice HTML. Fortunatamente possiamo cambiare la dimensione dell’immagine e spostarla usando il padding-left,right,top,bottom: _px .

Tieni presente che container-fluid è la mia barra di navigazione, ma potrebbe essere diversa per la tua app . Ulteriori opzioni di formattazione possono essere incluse nella porzione di stile del codice.

inserisci la descrizione dell'immagine qui

Nota che puoi anche aggiungere del testo e collegarlo in questo modo.

 # Create Right Side Text tags$script(HTML("var header = $('.navbar > .container-fluid'); header.append('

Follow us on GitHub

'); console.log(header)" )),

Assicurati di nuovo header.append attraverso '); sono nella stessa riga di codice in R

Ecco una soluzione che ho fatto sulla base delle precedenti grandi risposte:

  ui <- fluidPage( list( tags$head( HTML(''))), navbarPage("App user name", windowTitle = "App name", ... 

Il posto dove salvare le immagini è la cartella “www” sul server app Shiny:

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