UI components

load package

To start to use spsComps, load it in your Shiny app file or Rmarkdown file

## Loading required package: shiny

## Loading required package: spsUtil

So you can see it depends on shiny and spsUtil. When you load it, there is no need to additionally load shiny or spsUtil.

UI Components

For most of the UI components, you can view them in the online Shiny demo. Here we just select a few to demonstrate how you can use them in a R markdown.


A go top button.


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

texts <- c("p1", "p2", "", "p4", "p5")
hrefs <- c("https://github.com/lz100/spsComps/blob/master/img/1.jpg?raw=true",
images <- c("https://github.com/lz100/spsComps/blob/master/img/1.jpg?raw=true",
  texts = texts, hrefs = hrefs, images = images,
  enlarge = TRUE,
  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.


    "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

    "demo1", "" ,
    rep("https://live.staticflickr.com/7875/46106952034_954b8775fa_b.jpg", 2)


Some colorful buttons 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")

Different background and text colors

A table colorful buttons 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;"
Change button color and text color
Category Options
workflow 1 tab 1
No links tab 3 tab 4
    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("", ""),
        c("https://www.google.com/", "https://www.google.com/", "")
    item_title_colors = c("green", "red", "orange"),
    style = "display: table;"
Change row name colors and width
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.

show tips with bsHoverPopover

Space in a document is valuable. Sometimes you do not want to explain too much in the main text but still want to give readers some additional information. Use a popover to hide your additional text can be useful.

On a button

actionButton("a_btn", "A button", class = "btn-primary") %>% 
                title = "title a",
                content = "popover works on a button",
                placement = "bottom"

tags$a(href="mailto:xxx@abc.com", "Email") %>% 
                title = "Email me",
                content = "popover works on a link",
                placement = "bottom"


On a plot

plot(1:10, 10:1)
## png 
##   2
tags$img(src = "../random_plot.png") %>% 
              title = "My plot",
              content = "popover works on a plot",
              placement = "right"

Other components

Other components are either performed the best in a Shiny app or requires a server. Please see the demo

Last modified 2021-03-03: fix bug no_render (d7ed922)