background: Backgrounds

In nteetor/dull: A Reactive Web Framework Built on 'shiny'

Backgrounds

Description

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

Usage

background(x, color)

Arguments

x	A tag element or .style pronoun.
color	One of "primary", "secondary", "success", "info", "warning", "danger", "light" or "dark" specifying the background color of the tag element, defaults to NULL.

Details

Input backgrounds

Input backgrounds will change differently according to the particular input. Changing the background of a buttonGroupInput() will change the background colors of the buttons in the group.

buttonGroupInput(
  .style %>%
    background("info") %>%  # <-
    display("flex"),
  id = "flavors",
  choices = c("Mint", "Strawberry", "Swirl"),
  values = c("mint", "strawberry", "swirl")
)

Mint Strawberry Swirl

Changing the background of an input is different than changing a tag element. More is done under the hood to apply the correct background styles. For example, changing the background of a radio or checkbox input changes the color of the selected choices.

radioInput(
  .style %>%
    background("warning"),
  id = "drinks",
  choices = c("Limemade", "Lemonade", "Orangeade"),
  values = c("lime", "lemon", "orange"),
  selected = "lime"
)

Limemade

Lemonade

Orangeade

If you needed to change the entire background of an input, you can wrap the input in a div() and modify its background.

div(
  .style %>%
    padding(2) %>%
    background("dark"),  # <-
  radioInput(
    .style %>%
      font("light") %>%
      background("success"),
    id = "valid",
    choices = c("Yes", "No"),
    values = c("y", "n"),
    selected = "n"
  )
)

Yes

No

See Also

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

nteetor/dull documentation built on June 10, 2022, 11:30 a.m.