For most of the UI components, you can view them in the online Shiny demo{blk}.
Most but not all UI components work in a Rmarkdown document. Here we demostrate
how you could use some of them in a Rmarkdown doc. The source code of this
document is on Github{blk}.
load package
To start to use spsComps, load it in your Shiny app file or Rmarkdown file
library(spsComps)
## Loading required package: shiny
library(magrittr)
So you can see it depends on shiny. When you load it, there is no
need to additionally load shiny.
spsGoTop
A go top button.
spsGoTop()
It will not be display inline of the Rmd, just simply call it and maybe change the
style as you want. By default, a “go to top” button will be created on the bottom-rightcorner. Now scroll this page, and you should see it (the rocket button).
gallery
texts <- c("p1", "p2", "", "p4", "p5")
hrefs <- c("https://github.com/lz100/spsComps/blob/master/img/1.jpg?raw=true",
"https://github.com/lz100/spsComps/blob/master/img/2.jpg?raw=true",
"",
"https://github.com/lz100/spsComps/blob/master/img/4.jpg?raw=true",
"https://github.com/lz100/spsComps/blob/master/img/5.jpg?raw=true")
images <- c("https://github.com/lz100/spsComps/blob/master/img/1.jpg?raw=true",
"https://github.com/lz100/spsComps/blob/master/img/2.jpg?raw=true",
"https://github.com/lz100/spsComps/blob/master/img/3.jpg?raw=true",
"https://github.com/lz100/spsComps/blob/master/img/4.jpg?raw=true",
"https://github.com/lz100/spsComps/blob/master/img/5.jpg?raw=true")
gallery(
texts = texts, hrefs = hrefs, images = images,
enlarge = TRUE,
# only "modal" methods workds in Rmd, but other methods work in Shiny
enlarge_method = "modal"
)
The table caption is on top in Shiny but on bottom in Rmd. You may also want to
add the style = "display: table;" in Rmd to make the table occupy full length of
the document in R markdown.
Animations
animateUI
Add animations to existing components with animateUI
To buttons
tags$button(id = "btn1", "random button")
animateUI("btn1", animation = "ring")
To some text
p(id = "mytext", class = "text-red", "some move text")
## The `name` provided ('thumbs-o-up') is deprecated in Font Awesome 5:
## * please consider using 'thumbs-up' or 'fas fa-thumbs-up' instead
## * use the `verify_fa = FALSE` to deactivate these messages
Most animations required the target tag to have CSS display “block” or “inline-block”,
you can append this by adding style="display: inline-block" to the tag as shown above
or check examples below.
animateAppend
Add animations with pipe %>% by animateAppend
icon("home") %>%
animateAppend("ring")
tags$p("Append animation", class = "text-primary", style="display: inline-block") %>%
animateAppend("pulse")
Here is a convenient function that allows you to create font-awesome icons with
animations and customize, color, size, etc, an enhanced version of original
shiny::icon and can also be used in Rmarkdown.
Add loaders to indicate busy status. Most cases, loaders are added by a backend
server to show the busy processing status and are removed when the process is done.
Rmarkdown documents does not have a server, but you can still add some loaders.
cssLoader
Default loaders
There are 12 different default loaders: “circle,” “dual-ring,” “facebook,” “heart,”
“ring,” “roller,” “default,” “ellipsis,” “grid,” “hourglass,” “ripple,” “spinner.”
cssLoader(height = "100px")
customize it:
cssLoader(type = "grid", height = "150px", color = "orange")
Add to a button:
tags$button(
## `inline = TRUE` is important if you want loader and
## text in the same line.
cssLoader(is_icon = TRUE, inline = TRUE, color = "#3a7bd5"),
"A button"
)