Background color

Use background() to modify the background color of a tag element.

background(tag, color)

Arguments

tag	A tag element.
color	One of "red", "purple", "indigo", "blue", "cyan", "teal", "green", "yellow", "amber", "orange", "grey", "black" or "white" specifying the background color of the tag element, defaults to NULL

See also

Other design utilities: active(), affix(), border(), display(), float(), font(), height(), padding(), scroll(), shadow(), width()

Examples

### Modifying input elements

checkbarInput(
  id = "bar1",
  choices = c(
    "Nunc rutrum turpis sed pede.",
    "Etiam vel neque.",
    "Lorem ipsum dolor sit amet."
  )
) %>%
  background("cyan")
#> <div class="yonder-checkbar btn-group btn-group-toggle d-flex" id="bar1" data-toggle="buttons">
#>   <label class="btn btn-cyan">
#>     <input type="checkbox" autocomplete="off" value="Nunc rutrum turpis sed pede."/>
#>     Nunc rutrum turpis sed pede.
#>   </label>
#>   <label class="btn btn-cyan">
#>     <input type="checkbox" autocomplete="off" value="Etiam vel neque."/>
#>     Etiam vel neque.
#>   </label>
#>   <label class="btn btn-cyan">
#>     <input type="checkbox" autocomplete="off" value="Lorem ipsum dolor sit amet."/>
#>     Lorem ipsum dolor sit amet.
#>   </label>
#> </div>

### Possible colors

colors <- c(
  "red", "purple", "indigo", "blue", "cyan", "teal", "green",
  "yellow", "amber", "orange", "grey", "white"
)

div(
  lapply(
    colors,
    background,
    tag = div() %>%
      padding(5) %>%
      margin(2)
  )
) %>%
  display("flex") %>%
  flex(wrap = TRUE)
#> <div class="d-flex flex-wrap">
#>   <div class="p-5 m-2 bg-red"></div>
#>   <div class="p-5 m-2 bg-purple"></div>
#>   <div class="p-5 m-2 bg-indigo"></div>
#>   <div class="p-5 m-2 bg-blue"></div>
#>   <div class="p-5 m-2 bg-cyan"></div>
#>   <div class="p-5 m-2 bg-teal"></div>
#>   <div class="p-5 m-2 bg-green"></div>
#>   <div class="p-5 m-2 bg-yellow"></div>
#>   <div class="p-5 m-2 bg-amber"></div>
#>   <div class="p-5 m-2 bg-orange"></div>
#>   <div class="p-5 m-2 bg-grey"></div>
#>   <div class="p-5 m-2 bg-white"></div>
#> </div>