---
title: "UI components"
linkTitle: "UI components"
type: docs
weight: 1
---

For most of the UI components, you can view them in the [online Shiny demo{blk}](https://lezhang.shinyapps.io/spsComps).
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}](https://raw.githubusercontent.com/systemPipeR/systemPipeR.github.io/main/content/en/sps/dev/spscomps/ui.Rmd).



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

```{r}
library(spsComps)
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. 

```{r}
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`

```{r}
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`

```{r}
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`
```{r}
hexPanel(
    "demo1", "" ,
    rep("https://live.staticflickr.com/7875/46106952034_954b8775fa_b.jpg", 2)
)
```


## Buttons

### Some colorful buttons `hrefTab`

```{r}
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`
```{r}
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
```{r}
tags$button(id = "btn1", "random button")
animateUI("btn1", animation = "ring")
```

#### To some text
```{r}
p(id = "mytext", class = "text-red", "some move text")
animateUI("mytext", animation = "horizontal", speed = "fast")
```

#### On hover, move mouse on the red thumb
```{r}
tags$button(
  id = "btn2",
  icon(id = "myicon", "thumbs-o-up"),
  style = "color: red; boarder: initial; border-color: transparent;"
)
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: 

```html
some text some text <span id="some-text" style="display: inline-block">some text</span> some text some text
```
some text some text <span id="some-text" style="display: inline-block">some text</span> some text some text

```{r}
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`**


```{r}
icon("home") %>%
  animateAppend("ring")
tags$p("Append animation", class = "text-primary", style="display: inline-block") %>%
  animateAppend("pulse")
```

*****

### `animateAppendNested`

Apply multiple animations to the same component

```{r}
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
```{r}
animateIcon("home")
```

#### Animation and color
```{r}
animateIcon(name = "home", animation = "horizontal", speed = "slow", color ="red")
```

#### Add to a button
```{r}
tags$button(animateIcon("spinner", "spin", "fast"), "A button")
```

#### on hover
```{r}
animateIcon(name = "wrench", animation = "wrench", hover = TRUE, color ="green")
```

#### Change size
```{r}
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".

```{r}
cssLoader(height = "100px")
```

<br>

customize it:
```{r}
cssLoader(type = "grid", height = "150px", color = "orange")
```

<br>

Add to a button:
```{r}
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
```{r}
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`



```{r}
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`
```{r}
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:



```{html eval=FALSE}
<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>
```

<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`

```{r}
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`
```{r}
span("Popover") %>% bsPop("Popover", "Popover")
```


### Titles with `spsTitle`
You can use {spsComps} to add colorful titles in Rmarkdown
```{r}
spsTitle("primary", status = "primary")
spsTitle("info", status = "info")
spsTitle("success", status = "success")
spsTitle("warning", status = "warning")
spsTitle("danger", status = "danger")
```

<br>

Or you own colors
```{r}
spsTitle("purple", other_color = "purple")
spsTitle("pink", other_color = "pink")
```


### Add horizontal divider lines with `spsHr`

```{r}
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](https://lezhang.shinyapps.io/spsComps/)