### get knitr just the way we like it knitr::opts_chunk$set( message = FALSE , warning = FALSE , error = FALSE , tidy = FALSE , cache = FALSE #, results = 'asis' )
navr
has not achieved CRAN status yet, so for now we will install with devtools::install_github
as shown in the code below.
devtools::install_github("timelyportfolio/navr")
library(navr) library(htmltools) # navr loves htmltools::tags, and I do too # so let's use them tagList( tags$div( id = "simple-toolbar" ,style="width:100%;height:300px;border: dashed 0.2em lightgray;" ,tags$h1( "Div in Need of Toolbar" ) ,tags$p( "If all goes well, you should see something that resembles a toolbar. This toolbar is built in R using the htmlwidget " , tags$a(tags$code("navr"),href = "https://github.com/timelyportfolio/navr") ," which wraps the tiny, dependency-free powerhouse " ,tags$a(tags$code("responsive-nav.js"),href = "http://responsive-nav.com/") ,". Isn't open source great? For bonus points, open this in a mobile device" ,"or make your screen small enough to see the hamburger icon" , tags$span( class="fa fa-bars" ) ,"." ) ) ,navr( "#simple-toolbar" # id of selector for the div above ,tagList( tags$ul(style = "float:left;" ,tags$li(tags$a("worthless1"),href="") # for now just text ,tags$li(tags$a("worthless2"),href="") # for now just text ) ) , options = list( insert = "after" ) ) )
htmlwidget
ExampleI can imagine a scenario where one of our htmlwidget
friends might need a toolbar. Let's say a
DiagrammeR
diagram wants to add a toolbar for exporting the rendered SVG. We could do something like this.
library(DiagrammeR) gV <- grViz( "digraph{ DiagrammeR -> HTML; navr -> HTML; HTML -> beautiful; }" , height = 400, width = 600 ) tagList( # wrap diagram in a div since a lot of htmlwidgets clear contents tags$div(id = "diagram-needs-toolbar" ,gV ) ,navr( selector = "#diagram-needs-toolbar" # use HTML instead of tags ,taglist = HTML(" <ul> <li><a onclick = 'exportSVG()' href = '#diagram-needs-toolbar'>Export to SVG</a></li> </ul> " ) ) ,tags$script(" function exportSVG(){ window.open( [ 'data:;base64,', window.btoa((new XMLSerializer()).serializeToString( document.getElementById('diagram-needs-toolbar') .getElementsByTagName('svg')[0] )) ].join('') ) } ") )
We can apply these stylish hover effects from Ian Lunn with the helper function add_hover
. There are lots of different effects. Let's try pop
and float
.
library(htmltools) library(navr) # build a simple nav n1 <- navr( selector = "#pop-toolbar" ,taglist = tagList( tags$ul( tags$li(style="border: solid 0.1em white;","Popper") ,tags$li(style="border: solid 0.1em white;","Popping") ) ) ) # make a copy to show another effect n2 <- n1 n2$x$taglist = tagList( tags$ul( tags$li(style="border: solid 0.1em white;","Floater") ,tags$li(style="border: solid 0.1em white;","Floating") ) ) tagList( tags$div( id = "pop-toolbar" ,style="width:300px;height:300px;border: dashed 0.2em lightgray;" ,tags$h3("Hover Effects") ,"Hover effects are nice and let our users know that our navr actually does something. Just wait until you see our navr with icons." ) ,add_hover(n1,"pop") ,add_hover(n2,"float") )
Font-Awesome are the nice open-source MIT-licensed icons in Bootstrap. add_font
makes it easy to use these icons in our toolbar. Even neater, the hover effects shown below play very nicely with Font-Awesome, so I would encourage add_hover
+ add_font_awesome
. If you're in shiny, no need to use add_font_awesome
since Bootstrap already gives you these icons.
library(htmltools) library(navr) # build a simple nav n1 <- navr( selector = "#icon-toolbar" ,taglist = tagList( tags$ul(style="line-height:120px; text-align:center; vertical-align:middle;" ,tags$li( style="border: solid 0.1em white;border-radius:100%;line-height:inherit;width:130px;height:130px;" , class="fa fa-beer fa-4x" ) ,tags$li( style="border: solid 0.1em white;border-radius:100%;line-height:inherit;width:130px;height:130px;" , class="fa fa-bell fa-4x" ) ) ) ) tagList( tags$div( id = "icon-toolbar" ,style="width:300px;height:300px;border: dashed 0.2em lightgray; float:left;" ,tags$h3("Icon with Hover Effects") ,"Hover effects are even nicer when they work with icons, especially our easy to add Font-Awesome icons." ) ,add_hover(add_font_awesome(n1),"fade") )
I bet last week's widget sortableR
will also work with navr
.
library(navr) library(sortableR) library(htmltools) # build a simple nav n1 <- navr( selector = "#sortableR-toolbar" ,taglist = tagList( tags$ul(id = "sort-navr" ,style="line-height:120px; text-align:center; vertical-align:middle;" ,tags$li( style="border: solid 0.1em white;border-radius:100%;line-height:inherit;width:130px;height:130px;" , class="fa fa-bug fa-4x" ) ,tags$li( style="border: solid 0.1em white;border-radius:100%;line-height:inherit;width:130px;height:130px;" , class="fa fa-binoculars fa-4x" ) ,tags$li( style="border: solid 0.1em white;border-radius:100%;line-height:inherit;width:130px;height:130px;" , class="fa fa-camera fa-4x" ) ,tags$li( style="border: solid 0.1em white;border-radius:100%;line-height:inherit;width:130px;height:130px;" , class="fa fa-briefcase fa-4x" ) ) ) ) tagList( tags$div( id = "sortableR-toolbar" ,style="width:300px;border: dashed 0.2em lightgray; float:left;" ,tags$h3("sortableR Icons") ,"If you don't like the order of these icons, change them by drag and dropping." ) ,add_font_awesome(n1) ,sortableR("sort-navr") )
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.