R: Value box

value_box {bslib}

R Documentation

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

Examples


library(htmltools)

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

[Package bslib version 0.5.1 Index]

Value box

Description

Usage

Arguments

See Also

Examples