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" 
)

Gallery

p1

p2

 

p4

p5

X

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;"
)

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;"
)

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")

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