bslib (version 0.5.1)

value_box: Value box

Description

An opinionated (card()-powered) box, designed for displaying a value and title. Optionally, a showcase can provide for context for what the value represents (for example, it could hold a bsicons::bs_icon(), or even a shiny::plotOutput()).

Usage

value_box(
  title,
  value,
  ...,
  showcase = NULL,
  showcase_layout = showcase_left_center(),
  full_screen = FALSE,
  theme_color = "primary",
  height = NULL,
  max_height = NULL,
  fill = TRUE,
  class = NULL
)
showcase_left_center(
  width = 0.3,
  max_height = "100px",
  max_height_full_screen = 0.67
)
showcase_top_right(
  width = 0.3,
  max_height = "75px",
  max_height_full_screen = 0.67
)

Arguments

title, value

A string, number, or htmltools::tag() child to display as the title or value of the value box. The title appears above the value.

...

Unnamed arguments may be any htmltools::tag() children to display below value. Named arguments become attributes on the containing element.

showcase

A htmltools::tag() child to showcase (e.g., a bsicons::bs_icon(), a plotly::plotlyOutput(), etc).

showcase_layout

either showcase_left_center() or showcase_top_right().

full_screen

If TRUE, an icon will appear when hovering over the card body. Clicking the icon expands the card to fit viewport size.

theme_color

A theme color to use for the background color. Should match a name in the Bootstrap Sass variable $theme-colors (e.g., "secondary", "success", "danger", etc).

height

Any valid CSS unit (e.g., height="200px"). Doesn't apply when a card is made full_screen (in this case, consider setting a height in card_body()).

max_height, max_height_full_screen

A proportion (i.e., a number between 0 and 1) or any valid CSS unit defining the showcase max_height.

fill

Whether to allow the value box to grow/shrink to fit a fillable container with an opinionated height (e.g., page_fillable()).

class

Utility classes for customizing the appearance of the summary card. Use bg-* and text-* classes (e.g, "bg-danger" and "text-light") to customize the background/foreground colors.

width

one of the following:

• A proportion (i.e., a number between 0 and 1) of available width to allocate to the showcase.

• A vector of length 2 valid CSS unit defining the width of each column (for showcase_left_center() the 1st unit defines the showcase width and for showcase_top_right the 2nd unit defines the showcase width). Note that any units supported by the CSS grid grid-template-columns property may be used (e.g., fr units).

See Also

card()

Examples

library(htmltools)

if (interactive()) {
  value_box(
    "KPI Title",
    h1(HTML("$1 Billion Dollars")),
    span(
      bsicons::bs_icon("arrow-up"),
      " 30% VS PREVIOUS 30 DAYS"
    ),
    showcase = bsicons::bs_icon("piggy-bank"),
    class = "bg-success"
  )
}