slickR with DOMs

Source: vignettes/doms.Rmd

The most flexible implementaton of slickR is by building your own DOM elements and passing them into slickR.

img

We build the img DOM from scratch:

Single element 

img_bare <- htmltools::tags$img(src = nba_player_logo$uri[1])
slickR::slickR(img_bare)

Vector of elements 

imgs_bare <- lapply(nba_player_logo$uri[c(1:5)],function(x){
  htmltools::tags$img(src = x)
})
  
slickR::slickR(imgs_bare)

slick_div

slick_div is an S3 method which accepts different object classes such as character, shiny.tag,htmlwidget, xml_document objects. It will also internally convert a vector a elements so the user does not need to use lapply in their script.

It will also add some css style to the elements to center them in the carousel.

htmltools::css(marginLeft='auto',marginRight='auto')
#> [1] "margin-left:auto;margin-right:auto;"
slickR::slickR(slick_div(nba_player_logo$uri[c(1:5)]))

Mix and Match

We can also mix three different DOM types: img, p, iframe. In the iframe we will place a leaflet htmlwidget.

p

We put in Lorem ipsum into the paragraph

p <- htmltools::tags$p(
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
  style = htmltools::css(color='red','font-style' = 'italic')
  )

iframe 


w <- slick_div(
    x = leaflet::addTiles(leaflet::leaflet()),
    css = htmltools::css(
    height = '400px',
    marginLeft ='auto',
    marginRight='auto')
    )

Combining the elements

To pass a list of shiny.tag elements into slickR we first convert the individual shiny.tag into a tagList using slick_list.

doms <- slick_list(img_bare,p,w)

slickR::slickR(doms) + settings(dots = TRUE, adaptiveHeight = TRUE)