UI components
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-right corner. 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"
)
You can show a gallery of plots you make in the Rmd and when people click it, it will be enlarged. You can also specify a link for each image.
Logos
a single one with hexLogo
hexLogo(
"logo", "Logo",
hex_img = "https://live.staticflickr.com/7875/46106952034_954b8775fa_b.jpg",
hex_link = "https://www.google.com",
footer = "Footer",
footer_link = "https://www.google.com"
)
a panel of logos with hexPanel
hexPanel(
"demo1", "" ,
rep("https://live.staticflickr.com/7875/46106952034_954b8775fa_b.jpg", 2)
)
Buttons
Some colorful buttons hrefTab
hrefTab(
title = "Different background and text colors",
label_texts = c("Go top", "Disabled", "Email me"),
hrefs = c("#", "", "mailto:xxx@abc.com"),
bg_colors = c("green", "#eee", "orange"),
text_colors = c("#caffc1", "black", "blue")
)
A table colorful buttons hrefTable
hrefTable(
title = "Change button color and text color",
item_titles = c("workflow 1", "No links"),
item_labels = list(c("tab 1"), c("tab 3", "tab 4")),
item_hrefs = list(c("https://www.google.com/"), c("", "")),
item_bg_colors = list(c("blue"), c("red", "orange")),
item_text_colors = list(c("black"), c("yellow", "green")),
style = "display: table;"
)
| Category | Options |
|---|---|
| workflow 1 | tab 1 |
| No links | tab 3 tab 4 |
hrefTable(
title = "Change row name colors and width",
item_titles = c("Green", "Red", "Orange"),
item_labels = list(c("tab 1"), c("tab 3", "tab 4"), c("tab 5", "tab 6", "tab 7")),
item_hrefs = list(
c("https://www.google.com/"),
c("", ""),
c("https://www.google.com/", "https://www.google.com/", "")
),
item_title_colors = c("green", "red", "orange"),
style = "display: table;"
)
| Category | Options |
|---|---|
| Green | tab 1 |
| Red | tab 3 tab 4 |
| Orange | tab 5 tab 6 tab 7 |
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")
some move text
animateUI("mytext", animation = "horizontal", speed = "fast")
On hover, move mouse on the red thumb
tags$button(
id = "btn2",
icon(id = "myicon", "thumbs-o-up"),
style = "color: red; boarder: initial; border-color: transparent;"
)
## 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
animateUI("btn2", animation = "bounce", speed = "fast", hover = TRUE)
Inline animation
You can add animations to inline Rmarkdown text by giving it a HTML tag and id, like following:
some text some text <span id="some-text" style="display: inline-block">some text</span> some text some text
some text some text some text some text some text
animateUI(selector = "some-text", animation = "ring")
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")
Append animation
animateAppendNested
Apply multiple animations to the same component
tags$b("Nested animations", class = "text-primary") %>%
animateAppendNested("ring") %>%
animateAppendNested("pulse") %>%
animateAppendNested("passing")
tags$b("Nested animations display changed", class = "text-primary") %>%
animateAppendNested("ring") %>%
animateAppendNested("pulse", display = "block", style = "width: 30%")
animateIcon
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.
Default
Default is the same as original icon
animateIcon("home")
Animation and color
animateIcon(name = "home", animation = "horizontal", speed = "slow", color ="red")
Add to a button
tags$button(animateIcon("spinner", "spin", "fast"), "A button")
on hover
animateIcon(name = "wrench", animation = "wrench", hover = TRUE, color ="green")
Change size
animateIcon("home", size = "xs")
animateIcon("home", size = "sm")
animateIcon("home", size = "lg")
animateIcon("home", size = "2x")
animateIcon("home", size = "3x")
animateIcon("home", size = "5x")
animateIcon("home", size = "7x")
animateIcon("home", size = "10x")
Loaders
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"
)
Your own loaders
You can choose a gif to be a your loader
cssLoader(type = "gif", src = "https://github.com/lz100/spsComps/blob/master/examples/demo/www/spinner.gif?raw=true", height = "100px")
cssLoader(type = "gif", src = "https://github.com/lz100/spsComps/blob/master/examples/demo/www/bean_eater.gif?raw=true", height = "150px")
bsTooltip and bsTip
Add tooltips to the documents with bsTooltip
actionButton("", "Tooltip on the left") %>%
bsTooltip("Tooltip on the left", "left")
actionButton("", "Tooltip on the top") %>%
bsTooltip("Tooltip on the top", "top")
actionButton("", "Tooltip on the right") %>%
bsTooltip("Tooltip on the right", "right")
actionButton("", "Tooltip on the bottom") %>%
bsTooltip("Tooltip on the bottom", "bottom")
or use the higher leveler convenient function bsTip
actionButton("", "primary") %>%
bsTip("primary", status = "primary")
actionButton("", "info") %>%
bsTip("info", status = "info")
actionButton("", "success") %>%
bsTip("success", status = "success")
actionButton("", "warning") %>%
bsTip("warning", status = "warning")
actionButton("", "danger") %>%
bsTip("danger", status = "danger")
bsPopover and bsPop
There is no extra step if you use popovers in Shiny directly. In Rmarkdown, you need to add following as plain text close to the end of your Rmd:
<script src="https://cdn.jsdelivr.net/npm/jquery-popover@0.0.4/src/jquery-popover.min.js"></script>
<script>
$(function(){
$('span[data-popoverid] script').map(function(){
let el = document.createElement("script");
el.innerHTML = $(this).html();
document.body.appendChild(el);
});
});
</script>
Add Popovers to the documents with bsPopover
span("Popover on the left") %>%
bsPopover("Popover on the left", "Popover on the left", "left")
span("Popover on the top") %>%
bsPopover("Popover on the top", "Popover on the top", "top")
span("Popover on the right") %>%
bsPopover("Popover on the right", "Popover on the right", "right")
span("Popover on the bottom") %>%
bsPopover("Popover on the bottom", "Popover on the bottom", "bottom")
or use the higher leveler convenient function bsPop
span("Popover") %>% bsPop("Popover", "Popover")
Titles with spsTitle
You can use {spsComps} to add colorful titles in Rmarkdown
spsTitle("primary", status = "primary")
primary
spsTitle("info", status = "info")
info
spsTitle("success", status = "success")
success
spsTitle("warning", status = "warning")
warning
spsTitle("danger", status = "danger")
danger
Or you own colors
spsTitle("purple", other_color = "purple")
purple
spsTitle("pink", other_color = "pink")
pink
Add horizontal divider lines with spsHr
spsHr("info")
spsHr("primary")
spsHr("success")
spsHr("warning")
spsHr("danger")
Other components
Other components are either performed the best in a Shiny app or requires a server. Please see the demo